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Welcome to NetObjects Fusion 



NetObjects Fusion® 7.5 is the essential tool for building effective Web sites. 
Whether you are a professional Web site designer or designing a site for a small 
business or your family, you can use NetObjects Fusion to design your site quickly 
and easily. 

Map out your site structure by dragging and dropping page icons. NetObjects 
Fusion automatically creates and updates navigation and links. Lay out your pages 
quickly by dragging text, graphics, and multimedia into place. Select from dozens 
of SiteStyles®, or customize or create your own to apply a consistent visual theme 
throughout your site. 

Use the Photo Gallery tool to put your images on the Web in minutes. Select the 
images you want to use, choose a display format, and NetObjects Fusion does the 
rest. Your photo gallery is published to the Web so your friends and family can view 
it. 

Simplify the process of building your online store with NetObjects Fusion and 
match your catalog with the look and feel of your Web site. With just a few clicks 
you can easily create a catalog, add products and images, and arrange them so that 
navigation is effortless. Then, integrate credit card processing for an effective way 
to deliver world-class products and services to your customers online. 

NetObjects Fusion makes it easy for you to add dynamic content to your site 
whether you want simple object animation or custom JavaScript actions. You can 
have objects fly across the screen as the result of a site visitor's action. Or you can 
launch a sequence of animations at any given time. NetObjects Fusion contains 
powerful message-based animation and interactive authoring capabilities that you 
can use to access online resources. 

Building your site is just the beginning. NetObjects Fusion provides direct access to 
online resources that offer information and guidance for making your site 
successful. You can learn to host and promote your site, set up an online store, track 
site visitors, and build personal relationships with your customers. Templates, 
hundreds of SiteStyles, and components and services that can add new power to 
NetObjects Fusion and new features to your Web pages are available for you to 
download. 
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What's In This Guide 



What's In This Guide 

This guide contains step-by-step instructions that provide the quickest path to 
learning how to build Web sites with NetObjects Fusion. 

As you work through the lessons, imagine yourself designing a commercial Web 
site using some of NetObjects Fusion's many features to add content to the site. 

♦ In Chapter 1 , "Building a Site in 10 Minutes," you build a small site that 
provides the framework for all the lessons that follow. 

♦ Chapter 2, "Touring NetObjects Fusion," uses the site you built to introduce 
important NetObjects Fusion features. 

♦ Chapter 3, "Designing Site Navigation," shows you how to set up navigation to 
each page in the site so visitors have access to all pages. 

Completing the steps in the first three chapters helps you develop the most critical 
skills. You can do the steps in one or all of the other chapters in any order you 
choose. 

If you are upgrading from a previous version of NetObjects Fusion, read 
Chapter 13 to learn about the new features in NetObjects Fusion 7.5. If you created 
a site using a previous version of NetObjects Fusion, the upgrading chapter 
provides information you'll need to migrate your sites to NetObjects Fusion 7.5. 

If you don't find what you're looking for in this guide, try the NetObjects Fusion 
7.5 User Guide, which is included on your installation CD and from Online view. It 
describes the complete set of NetObjects Fusion's powerful features. 

Conventions Used in This Guide 

NetObjects Fusion often provides multiple ways to accomplish a task. For example, 
to display a page in Page view, you can click the Page button on the control bar, 
choose Page from the View menu, or press Ctrl+3. Procedures in this guide 
generally include the most convenient method, but other methods are usually 
available. If you are most comfortable using menu commands, you will probably 
find the item you are looking for on a menu even if it is not explicitly included in 
the steps. If you prefer using shortcut keys, check the NetObjects Fusion Quick 
Reference card for information. 

For readability, this manual presents all file names, paths, file extensions, HTML 
tags, and URLs like this. Example names that you should replace with your own 
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Welcome to NetObjects Fusion 



information appear in bold italic. Keyboard key names and user interface elements 
look like this, and items you are to type appear like this. 

This manual, the NetObjects Fusion 7.5 User Guide, and the online help assume 
you are proficient with Windows 98, Windows NT, Windows 2000, Windows ME, 
or Windows XP. If you need help using these systems, consult their respective user 
guides. This guide also assumes you are familiar with the World Wide Web and its 
terminology. 

About the Sample Site 

NetObjects Fusion 7.5 ships with a sample site for you to explore to see how 
various features are implemented. This site is in the NetObjects Fusion 7.5\Sample Sites 
folder. If you want to experiment with NetObjects Fusion, create a new site based 
on this site template. 



Getting Help 



NetObjects Fusion offers several options for getting online help. 

For topic help, select Help Topics from the Help menu to launch the help system 
and display the table of contents. 
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Getting Help 



To find information in the online topic help, click: 

♦ a book on the Contents tab and then double-click a topic to see the information 
it contains. 

Use the » button to move forward through topics in sequential order. 

Use the « button to move backward through the sequence. 

Click the Back button to return to the last topic you viewed. 

Look at the topics in the Quick Reference book to find keyboard shortcuts. 

♦ the Index tab and enter a keyword related to your topic . 

♦ the Search tab and type the word or phrase you want to search for. 

To see information about a specific item in any NetObjects Fusion window or a 
control in a dialog or palette: 

♦ Right-click the object and then select What's This? from the shortcut menu. 

♦ Click the question mark icon in the title bar of a dialog or palette, then click the 
item you want to learn about. 

In either case, an explanation of the item pops up. 
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Enter at modify a title ior the current psge. Sile visitors see 
this title in the title bar of their browser when they view this 
rjage. "This overrides the default page title, which is the page 
name. 















You can also highlight a menu command, then press Fl for an explanation, or if you 
are in Style view, select an element and press Fl . 

If you do not have a site open and you go to a NetObjects Fusion view, you see a 
page of tips about working in that view. Once you create or open a site, the View 
tips are no longer available. To see the tips again, close the site. 

For a summary of basic NetObjects Fusion concepts, choose NetObjects Fusion 
QuickS tart tips from the Help menu. 
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CHAPTER 1 



Building a Site in 10 Minutes 

Imagine that you are the Promotions Manager for a small alpine adventure 
company called Mountain Jacques, and one of the company's most experienced 
guides. You want to share your excitement about the services Mountain Jacques 
provides. You know you can strengthen the business by enhancing communication 
with customers, so you decide to create a Web presence for Mountain Jacques and 
use NetObjects Fusion 7.5 to build the site. 

Your goals are: 

♦ Make it easy for customers to learn about Mountain Jacques 

♦ Make it easy for customers to contact the company 



♦ 


Build excitement for upcoming events 


In this lesson you learn to: 


♦ 


Start NetObjects Fusion 


♦ 


Create a new blank site 


♦ 


Add pages 


♦ 


Add text 


♦ 


Add a picture 


♦ 


Set the SiteStyle 


♦ 


Move the MasterBorder and Layout margins 


♦ 


Use highlighted and rollover buttons 


♦ 


Preview a site 


♦ 


Save a site 
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Creating a New Blank Site 



NetObjects Fusion will 
"Open to most recently used 
file at startup" if this option 
is set in the Application 
Options dialog. To display 
the Application Options 
dialog, choose 
Options>Application from 
the Tools menu. 



Creating a New Blank Site 

You start with a new blank site. 

1. From the Windows Start menu, select Programs>NetObjects>NetObjects 
Fusion 7.5, or double-click the NetObjects Fusion 7.5 icon on the desktop. 

Go directly to NetObjects Fusion. Do not choose the Site Wizard. 

Online view appears. 

2. From the File menu, choose New SitoBlank Site to display the New Blank 
Site dialog. 

This is where you name your site file. NetObjects Fusion saves your site in a 
folder with the same name as the site, in the NetObjects Fusion 7.5\User Sites 
folder. 

3. In the File name field, type Mountain Jacques, then click Save. 




~zi *■ ts ri* n- 1 a 



r 



NetObjects Fusion Files [* nod] 



■ User Sites folder 



NetObjects Fusion site 
files have a .nod file 
name extension 



If file types are turned off in 
the Windows Explorer 
Options dialog the .nod file 
extension does not appear. 



The site name appears in the title bar of the window. NetObjects Fusion 
automatically appends .nod to the site's name to indicate a NetObjects database 
file. 
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Title bar with site name 



Control bar with view buttons 
showing selected view 



Select tool ■ 
Zoom tool 
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Pagename: |Home 
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You use NetObjects Fusion's views to develop your site. The control bar 
highlights Site view to show it is selected. Site view is where you develop your 
site's structure. 

A page icon represents each page in the site. Your new site has one page— the 
default Home page. The blue border shows it is selected. 

To display the Properties The Properties palette shows the name of the selected object, in this case, the 

palette, select Properties Home page. 

Palette from the View 

mem For information on any Properties palette option, click the question mark help 

button at the top right of the palette, then click the option or its label. You can 
also right-click the option or its label, then click the What's This? pop-up. 

Adding Pages 

In Site view you add pages. NetObjects Fusion adds new pages under the selected 
page. 

You are going to add four pages under the Home page. 

1 . With the Home page selected, click the New Page button on the control bar four 
times, to add four pages. 
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Adding Pages 



NetObjects Fusion adds four pages under the Home page, and names each 
page Untitledl ,Untitled2, and so on. 
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The toolbar on the left shows the Select tool is selected. 



'-tt 1 



Select 



ScreenTip showing 
tool name 



Display the ScreenTip to 
read the tab name. 



You can hold the pointer over a tool in a toolbar or tab on a Properties palette 
for a few seconds to see a ScreenTip. ScreenTips tell you the name of tools, 
properties palette tabs, and other indicator icons. 

2. With the Home page selected, type Mountain Jacques in the Page title field of the 
Properties palette. 

Now, when site visitors view the Home page in a browser, the browser's title bar 
displays Mountain Jacques instead of Home. 

3. On the far left page, click the name Untitledl to select the page name. 

4. Type Mission, then press the Tab key to select the next page name. 

5. Name the remaining three pages Events, Next Tour, and Contest. 

6. Press the Enter key to view the final page name on the Page tab of the 
Properties palette. 
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Chapter 1 Building a Site in 10 Minutes 




Now you add pages under the Events page to describe upcoming events. 

7. Click the Events page to select it. 

8. Click the New Page button twice to add two pages under the Events page. 

9. Name the two pages Activities and Highlights. 

Next you add a page to advertise the contest prize. 

10. Click the Contest page to select it. 

11. Click the New Page button once to add a child page under the Contest page. 

12. Name the page Wonder Lodge and press Enter. 

If the page name is too long to fit on the page icon, NetObjects Fusion displays 
an abbreviated version of the name. 
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Adding Pages 




13. Double-click the Home page icon to open the Home page in Page view. 
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Looking at Page View 



Page view is where you design and add content to your pages. 

Note: Illustrations in this manual show Page view with the grid turned off and the SiteStyle 
background removed. You can leave the grid turned on to assist in placing objects. 



Page view tabs 



MasterBorder label 
Standard toolbar — 



Button navigation bar - 
in left MasterBorder 



Site Navigation 
palette 



Vertical ruler 



Advanced toolbar 

Text navigation bar in - 
bottom MasterBorder 

Palette Launcher 
buttons 



Layout 
label 



Page 
name 
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Banner showing page name Layout Properties 



Home 



Mountain Jacques. 
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Layout 



The Home page opens in Page view. By default NetObjects Fusion displays the 
Standard and Advanced toolbars docked in the left window border, the 
Properties palette showing properties of the selected item, and the Site 
Navigation palette, which you use to move between pages as you design the 
site. 

You can drag toolbars away from the window border onto the workspace. You 
can drag the title bars of toolbars and properties palettes to move them, so yours 
might appear in a different place on the screen from what you see here. 

Use the buttons in the lower left of the Page view window to open and close the 
Properties palette, Site Navigation palette, and Object Tree palette. 
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Adding Text to the Page 



The MasterBorder works 
like a header and footer, but 
on all four sides of the 
Layout. 



Page view is divided into two areas: MasterBorder and Layout. The 
MasterBorder is the top, bottom, left, and right margins of the page. The 
MasterBorder typically contains objects that repeat across many pages, such as 
navigation bars and banners. The Layout typically includes the page's unique 
content. 

To select the MasterBorder or Layout area, simply click inside it. When the 
MasterBorder is selected, its label is red; when the Layout is selected, its label is 
blue. The Properties palette always shows properties of the selected item. 

The DefaultMasterBorder includes a banner in the top margin, a button 
navigation bar in the left margin, and a text navigation bar and the Built with 
NetObjects Fusion 7.5 logo in the bottom margin. 



Text tool 



You can select Undo from 
the Edit menu to undo any 
action since the last time 
you changed views. 



Adding Text to the Page 



You begin by adding a welcoming message to the Home page. In NetObjects 
Fusion, everything on the page is an object, so to type text you add a text object. 

1. From the Standard toolbar, select the Text tool. 

2. Drag a wide text box starting near the top left of the Layout area. 

Don't worry about the size of the box. As you type, the text box grows to 
accommodate the text, if needed. 
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Chapter 1 Building a Site in 10 Minutes 



Use standard arrow, 
Backspace, and Delete keys 
to edit text. 



The text box appears with hollow handles and contains a blinking insertion 
point. The pointer changes to an I-beam when you move it over the text box, 
indicating that you can type text. 

3. Type: 

Mountain Jacques 

4. Press Shift+Enter to force a line break. 

Shift+Enter inserts a single line space instead of the double line space inserted 
when you press Enter, and causes this text to break exactly where you want it to. 

5. On the new line, type: 

Experience the best nature has to offer... 




While editing text, the Text Properties palette displays the Format tab, with 
options such as Font, Size, and Color that you can use to format selected text. 

The Font field shows the font is Arial. The Size field shows the size is +0, 
which is the default body text size expressed as an HTML relative size. 

6. Click outside the text box. 

The height of the text box automatically adjusts to accommodate the text, and 
the hollow handles disappear. 
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Adding Text to the Page 



Home 




I Homell 1| 1 | I I I 



If necessary, to turn on 
object outlines, select 
Object Outlines from the 
View menu. 



An outline surrounds the text. 
7. Click once anywhere on the text box to select it. 

Solid handles surround the text object to show it is selected. 
The Text Properties palette displays the Text Box tab. 




fountain Jacques*- 
Experience the p&st nature has to offer 




When the text object has solid handles, you cannot edit the text, but you can 
move, resize, or delete the text box. 
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Bold button 



Align Center button 



8. Double-click inside the text box so the hollow handles reappear. 

9. Drag through all the text to select it. 

The Text Properties palette displays the Format tab. 

10. Click the Bold button. 

11. In the Size field of the Format tab, select +2. 

If necessary, the text box enlarges to accommodate the text. You can also drag a 
hollow or solid handle to reshape a text box. 

12. If necessary, drag a text box handle so the text box is wide and the text occupies 
two lines. 

13. In the Paragraph section of the Format tab, click the Align Center button. 
The text changes accordingly. 



Align buttons in Paragraph 
section of Format tab 




Mountain Jacques 
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14. Click outside the text box to deselect it. 
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Adding a Picture 

The Mountain Jacques art department created a graphic for the Home page. 

1. From the Standard toolbar, select the Picture tool. 

2. Place the pointer below the left side of the text object in the Layout area and 
draw a box. 

The size of the box doesn't matter; NetObjects Fusion automatically adjusts the 
box to fit the picture after you place it. 

The Picture File Open dialog appears so you can locate the image you want to 
place in the picture box. 

3. With the Folder tab selected, navigate to the Mountain Jacques artwork in the 
NetObjects Fusion 7.5\Tutorial folder, select mageMap.jpg, then click Open. 




Folder tab 



Thumbnail image of 
selected file 



The picture appears selected in the Layout area. 

When the picture is selected, the properties palette shows Picture Properties. 
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To edit a picture using the 
editor specified in the 
Options dialog, right-click 
the picture and select Open 
File In External Editor from 
the shortcut menu. 



Ctrl+drag copies the 
picture. If you accidentally 
drag the picture instead of 
the handle, select Undo 
Copy Object from the Edit 
menu, press Ctrl+I to 
undo, or right-click the copy 
and select Delete Object 
from the shortcut menu. 




Display settings 

You can crop or size a picture by dragging its handles. 

■v" When the Display setting is Normal, you can drag any handle to crop the 
picture. 

•v" When the Display setting is Stretch, you can drag any handle to resize the 
picture. 

To restore a picture to its original size and shape, right-click it and select 
Restore Original Size from the shortcut menu. 



Setting the SiteStyle 



A SiteStyle is a set of graphic and text elements used throughout your site to 
provide a consistent look. SiteStyle elements include the banner and buttons for 
navigation bars, as well as a type of bullet, a line, and colors for linked text. Each 
SiteStyle also includes a set of text styles, such as a font and size for the body of the 
page, and various combinations of text attributes for different sized headings. 

The default SiteStyle doesn't reflect Mountain Jacques' image. Fortunately, the 
Mountain SiteStyle is available. 
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Setting the SiteStyle 



Style 



1. Click the Style button on the control bar to go to Style view. 

Style view displays the elements of the currently selected SiteStyle, which is 
Phoenix— Teal & Gray. Phoenix— Teal & Gray is the default SiteStyle for all 
new blank sites. 



Graphic 



List of SiteStyles . 



Selected SiteStyle 
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-Text tab 



Primary Navigation Bar Sample 



indary Navigation Bar Sample 





Primary Button State* 




- Elements 
of selected 
SiteStyle 



Data List Icons 

> Data List Icon 

> Data List Icon 

> Data List Icon 



Edit Style background 



2. Select Mountain from the list of Local SiteStyles. 
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Text tab, where text properties 
are set for a SiteStyle 

Mountain banner style 



Primary button styles: 
regular, highlighted, and 
rollover buttons 



Secondary button styles 



Data list icons 



Line style for 

Mountain SiteStyle 



, Frada - Green 



_,Frada-Purple 
^Frada-Red 
— _,«,»» i?dp-wply 

<|j FusionZap ■ Turquoise 

FusionZap- Yellow 
I Gardening 



% Glasgow -Red & BL 



J&- Green 
jH- Purple 
§Kid 

Latitude 
% London- Blue &< 



_, London 



__j Phoenix - Purple & 
^Phoenix -Teal St G 
% Push Button 
^Quala-Aqua 



, Ouiii - Orange 
Quala - Red 



j5olar-Red 

^ioijr-veiio™ 
Spring I 
, Sunfiower 



__j Tacta - Green 
_, Tacta ■ Red 
, : w.i ■ Yellow 



Banner 







Primary Navigation Bar Sample 



Secondaiy Navigation Bar Sample 



Button Text 


■ Button Text 


Button Text 




■HUB 


[ Button Text ' 


Button Text 


■ Button Text 



Primary Button States 



Regular Highlighted 

BSESBI ButtonText 



Secondary Button States 



Data list Icon; Edit Style background 



Q Data List Icun 
Q Data List Icun 
□ Data List Icon 



- Click to show Page 
Background Properties 



Set Style 



3. Click the Set Style button on the control bar. 

4. Click OK to close the confirmation message. 

5. Click the Page button on the control bar. 

The Home page appears in Page view, displaying the Mountain SiteStyle. 

The SiteStyle has a two-tone background. The left side of the background is 
powder blue. 

6. Choose Snap to Object Outlines from the View menu. 

This way, when you drag an object toward another object, it aligns next to it 
without overlapping. 

7. Drag the text object upward to the top of the Layout and adjust it to be the same 
width as the banner. 

8. Drag the picture upward so it is touching but not overlapping the bottom of the 
text, and is centered under it. 
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Moving the MasterBorder and Layout Margins 



I 1° hw 1 , |3?q hyo |s;q |b?q jj I 




Moving the MasterBorder and Layout Margins 

You are going to remove extra space surrounding the banner and Layout objects. 
This improves the DefaultMasterBorder, which is currently assigned to each page 
in the site. 

1. Select the banner and press the up arrow key several times to move the banner 
pixel by pixel to the top of the page. 
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2. Drag the handle for the top MasterB order margin upward until the guide is even 
with the bottom of the banner. 

3. Click in the MasterBorder to display the MasterBorder Properties palette. 

As you drag, the ScreenTip shows the ruler setting for the guide. This setting 
also appears in the Top field of the General tab of the MasterBorder 
Properties. 

4. Drag the handle for the bottom of the Layout upward until the guide is even 
with the bottom of the picture. 

All the objects in the bottom MasterBorder move up when you release the 
mouse button. 

5. On the MasterBorder Properties palette, set the Left margin to 140. 
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Setting Button Navigation Bar Properties 

You can set up buttons that are highlighted as you pass the pointer over them in a 
browser. 

1. Select the button navigation bar in the left MasterB order. 

The Properties palette shows Navigation Bar Properties. Note that this button 
navigation bar uses the Primary button style as specified in the Mountain 
SiteStyle. 

2. Click the Background tab. 

3. In the Button style section, make sure Use highlighted buttons and Use 
rollover buttons are selected. 
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i Lid !• 1 0 I 




Button style 






t* Current SiteStyle 






f^Other: | Bumps - Gunmetal _J 






Use highlighed buttons 






Use rollover buttons 






Background color 






(* None 






C\~ Color... | 






Display (in pixels) 






Border: [tj Spacing: [tj 







-v- Rollover buttons change to the rollover buttons shown in Style view as site 

visitors pass the pointer over them in a Web browser. 
-0" Highlighted buttons show the highlighted button style for the page being 

viewed in a browser. 
In Chapter 3, "Designing Site Navigation," you make a new MasterBorder, and 
button navigation bars that contain different buttons and display other page 
names. 



Preview Site 



Previewing Your Site 



You accomplished a lot in a short time, and you want to see how your site looks in a 
Web browser. NetObjects Fusion helps you check your work by previewing it in a 
browser as you develop your site. 

Z) To preview your site, click the Preview Site button on the control bar. 

The Previewing Site dialog appears showing progress messages as NetObjects 
Fusion generates HTML for your pages. 

NetObjects Fusion launches your Web browser and displays the page from 
which you started the preview. 
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Previewing Your Site 



Browser's title bar shows - 
the name you typed in the 
Page title field of the Site 
view Properties palette 



Banner, showing 

current page name 

Highlighted button — 
indicates current page 



tdit View r ; awr,i'Ke- : : Tods Help 



«-B.ck . » - © ^ 3 ftse.tr, jJFa.or.ei {Jhllitary ||- § g • | 1 g Q J 



Address C:\NetObjects Fusion 7\User 5iteslMountain JacaueslPreviewlindex.H 



Home 



Mountain Jacques 
Experience the best nature has to offer., 




[Home] [Missionl [Eventsl [Next Tourl [Contest] 



To select a different browser 
for previewing, from the 
Tools menu, choose 
Options>Application and 
display the Preview tab. You 
can also select whether to 
preview the current page or 
the entire site. 



The other pages have no content yet, but you can click the navigation buttons to 
view the pages and their style elements. 

Notice that all the MasterBorder margins are the same as the Home page. This is 
because, as shown in the MasterBorder Properties palette, all pages are 
currently assigned the DefaultMasterBorder. 

When you are done previewing, you can minimize or close the browser, or 
simply make NetObjects Fusion the active window again. 
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Saving Your Site and Exiting 

You might want to take a break and continue building your site later. 

Z> NetObjects Fusion automatically saves your site every time you switch views or 
open a different page. To save your site manually at any time, select Save Site 
from the File menu. 

Z) To exit NetObjects Fusion, select Exit from the File menu. 

The Program tab of the Application Options dialog contains an option to 
Compact database upon exit. When this option is selected, NetObjects Fusion 
compresses the site to occupy less disk space, and verifies the integrity of your 
site file. 

Z> To continue, simply save your site and do not exit the program. 

Where To Go From Here 

You just created a site for Web publishing with NetObjects Fusion. Chapter 2, 
"Touring NetObjects Fusion," shows you how to open the site and acquaints you 
with NetObjects Fusion's views, toolbars, properties palettes, and other basic 
elements of the program. Familiarity with the basic parts of NetObjects Fusion will 
help you immediately begin using its features to enhance your Web sites. 
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Where To Go From Here 
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Touring NetObjects Fusion 

In this chapter you tour NetObjects Fusion. To see the items in this tour you must 
first follow the steps in Chapter 1 , "Building a Site in 10 Minutes," to create the 
Mountain Jacques site you open and explore. 

This chapter gives you information about: 



♦ 


Opening your site 


♦ 


Site view 


♦ 


Standard toolbar 


♦ 


Properties palette 


♦ 


Menus 


♦ 


Options and site settings 


♦ 


Outline view 


♦ 


Page view 


♦ 


Text and text styles 


♦ 


Layout properties 


♦ 


MasterBorder properties 


♦ 


Rulers and guides 


♦ 


Site Navigation palette 


♦ 


Links 


♦ 


HTML Source view 


♦ 


Style view 


♦ 


Assets view 


♦ 


Publish View 
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Opening Your Site 

1 . If necessary, start NetObjects Fusion 7 .5 . 

•v- If the Mountain Jacques site is open, go directly to the next section, "Site 
View." 

•0- If NetObjects Fusion is started and the Mountain Jacques site is not open, 
choose Mountain Jacqucs.nod from the list of Site Projects in Online view 
and then go to the next section, "Site View." 

■0- If the site is not on the list, choose Open Site from the File menu and 
continue to step 2. 

2. Navigate to the NetObjects Fusion 7.5\User Sites\ Mountain Jacques folder, then 

select Mountain Jacques. nod. 



If your system is set to hide 
file name extensions, the 
sitename will not show the 
.nod extension. 



<in: [&M 



ountain Jacques 



_l Assets 
I Backups 
I Preview 



|1 Mountain Jacques. nod 



~3 *• E H- 



File name: | M ountain J acques. nod 

Files of type: | NetObjects Fusion Files (".nod] 



Open 



3 



J 



3. Click Open in the Open dialog, and if necessary, click OK. 
The Mountain Jacques site opens . 
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Site 



Site view button 



Zoom In tool 



Site View 

Z) If necessary, click the Site button on the control bar to go to Site view. 



Fib Edit View Go Tools Help 

£ K s © m 



Online Site Page Style Assets Publ 

Structure j Outline 



Mission Eve n t s N ext Tout u o nte s t 



, T , 






Activities j Highlights 


Wonder... 




New Page 
Preview Site 



Select Print from the File 
menu to print the 
SlteStructure starting with 
the selected page. 



Site view is where you build and edit the structure of your site. 

The control bar contains a button for each of NetObjects Fusion's six views, plus 
buttons to create a new page, preview your site in a Web browser, and publish your 
site. 



Zoom In Zoom Out 
tool tool 



Tools EJ 



_ 



Standard Toolbar 

By default the Standard toolbar is docked when you first start NetObjects Fusion. 

You can use the Zoom In tool to enlarge the size of the page icons. Point to the tool 
and hold down the left mouse button to see the flyout containing the Zoom Out 
tool. Select the Zoom Out tool from the flyout to reduce the size of the page icons. 

You can drag any NetObjects Fusion toolbar by its double bar to undock it. Once 
undocked, you can drag the title bar to move the toolbar, double-click the title bar to 
dock it, or click the Close box to close it. To view the toolbar again, choose 
Standard Tools from the View menu. 

The next time you start NetObjects Fusion, the toolbar appears where it was when 
you exited the program. 
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Site View 



Properties Palette 



Press F3 to show and hide 
the Properties palette. 



Display the Screen Tip to see 
the tab name. 



By default the Properties palette is open when you start NetObjects Fusion. You 
can drag the title bar to move it, double-click the title bar to minimize it, and click 
the Close box to close it. When closed, you can view it again by choosing 
Properties Palette from the View menu. 

Like the toolbar, the Properties palette appears where it was when you exited the 
program. 

To learn about any option on the Properties palette, either: 

♦ Click the question mark icon, then click an option label. 

♦ Right-click an option label, then click the What's This? pop-up. 

The Properties palette changes to give you information about the selected object. 

The Page tab is where you set properties for the selected page. 

In Site view, the Page tab of the Properties palette shows the page name, title, type, 
and currently assigned MasterBorder. 



□ \®\®\ 



Page name: (Home 



Page title: (Mountain Jacques 

Custom Names... j 
Page type: Normal 
MasterBorder: | DefaultMasterBorder ^ | 



By default the page name appears on the banner and navigation button for the page. 
To set a custom name for the banner or button, click the Custom Names button and 
type a new name in the Navigation button or Banner field. You can also open this 
dialog using the Custom Names command on the Edit menu. 
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To type a two-line button or 
banner name, press Enter 
after the first line. 



Custom Names 



Navigation button: 

Banner: 

File extension: 




-3 



□ K Cancel 



To restore the original name to banners and navigation bar buttons, delete the entry 
in the Custom Names dialog. 

You can use the Management tab of the Properties palette to set page status to 
Done or Don't publish, color code pages with certain attributes, and add 
comments. 




□ ill El I 

Page status: I Done 

r" Don't publish 

Color code — 

User defined: |~~ Color... 




Use the META Tag tab to enter META tags that can be applied to a single page, 
several pages or all pages. Choose from the list of META tags available and type 
information about your site in the text field. The META tags will appear within the 
<HEAD> tag of each page. 

To apply META tags globally to your site, enter the META tags on the Home page 
and select 'Apply META tags to all pages". 



31 



Site View 



Site View Menus 

The menus change depending on the view. The commands available in Site view 
are generally available in other views, in addition to other commands. 

♦ The File menu contains commands to open, close, and save sites, import and 
export sites, documents, and templates, reference HTML files external to the 
site, and print your site's structure. 

♦ The Edit menu contains commands to copy and delete pages, select a site 
section, create a new page, edit custom names, and search for and replace text. 

♦ The View menu contains commands to show and hide the toolbars and palettes, 
set the Site view orientation so the Home page is either at the top (Vertical) or 
at the left (Horizontal), set the Site view background color, and set page color 
coding to MasterBorder or User Defined. 

♦ The Go menu contains commands to show any view, search for a named object, 
go to a particular page, go to the last view, select from a list of recent pages, and 
preview. 

♦ The Tools menu contains commands to spell check the site or selected pages 
and to display the Application Options and Current Site Options dialogs 
described in the next section, "Setting Application Options," and "Viewing 
Current Site Options" on page 36. You can also edit your NetObjects Fusion 
profile and refresh the onscreen display. 

You must be online to use ♦ The Help menu contains commands to launch the NetObjects Fusion Help 
some commands on the system, go to various pages on the NetObjects Web site, and visit eFuse.com, an 

Help menu. online magazine dedicated to helping you build your Web site. You can also 

obtain version number, serial number, and copyright information from the 

About box. 

Setting Application Options 

1. From the Tools menu, choose Options> Application. 

The Options dialog appears showing the Program tab. 
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Program | Preview | Text | International | Updates | 
V? Auto save 

W Application iftiindoiM matfirrrissd at startup 
Open to most recently used iile at startup 
Open iile to most recent view 

W Use small fonts in properties palette 
Compact database upon esii 



External iile editors 
HTML: notepad.e: 
GIF: | 
JPEG: |~ 



!'.■] sssuterrienf units: 



| Pixels 
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Default HTML editor 



Browse to your favorite GIF and JPEG 
editors and select them here. You can 
select an image in Page view and open 
it using these external editors 



Use the Program tab to set options that are in effect every time you launch 
NetObjects Fusion. 

♦ When Auto save is selected, NetObjects Fusion saves your site each time 
you change the page or view, open a different site, or exit. 

4- To continue working where you left off when you next launch NetObjects 
Fusion, select Open to most recently used file at startup and Open file to 
most recent view. 

♦ By default NetObjects Fusion compacts your site file and verifies the site 
when you exit. 

♦ NetObjects Fusion launches the specified external editors in Page view 
when you select a referenced HTML file or image and choose Open File in 
External Editor from the Object or shortcut menu. 

♦ You can select a unit of measurement for the page width, height, Layout, 
and MasterB order. 

2. Click the Preview tab. 
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Application Options 



Program Text | International] Updates | 



Select previewing default 

Internet Explorer 6.0 ' Add... | 

Netscape Navigator 4.08 (en] 
□ Netscape Navigator 6.01 (en] Remove 



Preview scope 
^* Current page 



Window size — 
f* Maximized 
r 640 K 480 
C 800 K 600 
C 1024 k 70S 



Edil... 



The Preview tab is where you select the default browser for previewing your 
sites, and whether to preview the current page or the entire site. You can also 
specify the size of the browser preview window so you can approximate the 
amount of content your site visitors can view on their screens. 
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3. Click the Text tab. 



Program | Preview |J®^ j International | Updates | 



Browser font settings 

Proportional: J Times New Roman T | [l2 
Fixed width: (Courier New 3 ZI 



Automaticallv select entire word 
W Smart spell check 

Check spelling as >jou type 
|"~ Display report message 



Use the Text tab to set the default font and size the browser uses when 
previewing NetObjects Fusion sites as well as spell-check options. 

The International tab contains format settings for the date and time, decimal 
notation, spelling dictionary, language sort order, and character set to use for 
imported HTML. 

Use the Updates tab to specify when to check for program updates . 
4. Click Cancel to close the Options dialog. 



35 



Site View 



Viewing Current Site Options 

1. From the Tools menu, choose Options>Current Site. 

The Current Site Options dialog appears showing the General tab. 
UimHUJ.I,UI,l,[^^^M>,'i j?jxj 

General | META tags | History | Backup | 

Site name: MySite 
SiteStyle: Phoenix - Teal. Gray 
Number of pages: 8 



-Defaults 

Browser compatibility: 


(Dynamic Page Layout - All browsers 


Change... | 


New page size: 




Height: |555 Wi ^ h: 


|730 -fj 


Character set: 




1 Western European (IS 0-8859-1) 







-Tent formatting 

C HTML (* Cascading Style Sheets (CSS) 



fluote type: | Curly Quotes ^ 

HTML Options... Variable Options. 



OK Cancel 



The General tab shows the name of the open site, the current SiteStyle, the 
number of pages it contains, and the default settings for this site. 

For more information, see Use the Browser compatibility field to specify the target browsers you want to 

Chapter 12, "Supporting support . 

Target Browsers." 
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2. Click the Change button. 



Browser Compatibility 



Browser compatibility 

W Netscape Navigator 4.x 

W Microsoft Internet Explorer 4.0 and above 



<-HTML generation 

(* Dynamic Page Layout 

Uses complex hidden tables to achieve the highest level of 
accuracy and better performance. 

C Regular Tables 

Uses a hidden table to achieve a high level of layout 
accuracy. Though performance is not as good as Dynamic 
Page Layout, it avoids occasional problems with Netscape 
Navigator. 

C Fixed Page Layout 

Uses Cascading Style Sheet Positioning and IE-specific tags for 
Microsoft Internet Explorer 4.0 and above to create the highest 
level of accuracy; uses HTML and Netscape-specific tags for 
Netscape Navigator 4.x. 

When you select both 4.0 browser options, both HTML output 
options are applied. 




1 



J 



For more information, see 
Chapter 12, "Supporting 
Target Browsers." 



For more information see 
Chapter 7, "Controlling 
Published Output, "in the 
NetObjects Fusion User 
Guide. 



The Browser compatibility section is where you select the browser versions 
your site audience is most likely to use. 

HTML generation is where you select the HTML standard NetObjects Fusion 
generates. 

♦ Dynamic Page Layout uses complex hidden tables to achieve the highest 
level of layout accuracy across all browsers. This is the default setting. 

♦ Regular Tables supports the lowest common denominator of browsers. 
These pages achieve the least layout accuracy but the greatest browser 
compatibility. 

♦ Fixed Page Layout supports Microsoft Internet Explorer 4.0 and above and 
Netscape Navigator 4.x. This option is suggested when using NetObjects 
Fusion actions, and is required for layered or overlapping objects. Using 
cascading style sheet positioning and layers, this option achieves the highest 
level of layout accuracy with Microsoft Internet Explorer 4.0 and above and 
Netscape Navigator 4.x. 



3. Click Cancel. 
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♦ The General tab also shows the default page width and height for new pages 
you add to the site, the default character set, and the type of quotes. 

♦ You can select the HTML or Cascading Style Sheets (CSS) standard for 
formatting text. 

♦ Use the HTML Options dialog to specify how you want NetObjects Fusion 
to format tabs, spaces, line breaks, word wrap, letter casing, comments, and 
other items in the HTML it generates for you. 

♦ Use the Variable Options dialog to enable variable substitution. You can 
add a prefix and suffix to NetObjects Fusion's syntax that will not conflict 
with your custom defined variables. 

♦ Use the META tags tab to type keywords for search engines and other 
HTML META tag content such as the site's author. These META tags will 
be applied to all pages in your site if you have not added META tag 
descriptions in Site view. 

♦ The History tab shows the site's creation and last modification date. You can 
enter comments in the Latest changes field of the Revision log section. 

♦ Use the Backup tab to view and change the default backup folder, file 
naming convention, and number of backups stored. 

By default NetObjects Fusion automatically creates a backup of your site 
file when you exit the program, under the location and name specified. 

4. Click Cancel. 



Click minus sign - 
to collapse view 



Site Outline 

1 . Click the Outline tab under the control bar. 

The SiteStructure appears on the Outline tab, showing the status of the selected 
page or its children. 



File 


Edit View Go T00I5 Help 












& m 


3 $ 


B 




O 


nline Site Page 


Style Ass 


ts Publish 


New Page 


Preview Site Publish Site 


J 


Structure 1 


Outline 








.- | | Home 


Child Name 


| Page Type 


| Status 






n Mission 
l-'-.JH] Events 

: n Activities 

G Highlights 
n ^exi Tour 
a-JH Contest 

■ n Wonder Lodge 


Mission 

Next Tour 
Contest 


Mormal 
Mormal 
Norma: 
Mormal 


Not done 
Not done 
Not dor it 
Not done 


Yes 
Yes 
Yes 
Yes 



-Click column 
heading to sort 
by column 
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♦ To expand or collapse the view, click the plus or minus sign next to a page. 

♦ To sort by column, click the column heading. 

♦ To restore the original order, click the icon for the Home page. 
2. Click the Structure tab to return to Structure view. 

♦ To collapse this view, click the triangle under a page. 

♦ To expand this view, click the plus sign under a page. 



Page View 



Ruler 



Palette Launcher 



Page view is where you design your layout, add content and services, and set up 
MasterBorders. 

Z) Select the Home page icon, then click the Page button on the control bar to go 
to Page view. 

MasterBorder and 
Layout handles 



Object 
outline 




pointer 
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Page View 



Z> Use the Palette Launcher buttons to show or hide the Properties palette, Site 
Navigation palette, and Object Tree palette. 



1 — 1 _l 1 







■ 


Cr 














1 • 


1 ! 


1 


□ HomeL.ivout -r 


hi 





-Show/hide Properties palette 

- Show/hide Site Navigation 
palette 

Show/hide Object Tree palette 



Z) Choose Page View Options from the View menu, or press F1 2 to display the 
Page Properties palette. 



Page Properties 



Vorkspace- 



[7 Rulers & guides 

|~~ Grid: Vidth JiF" 

[7 Labels 

[7 Object outlines 

[7 Object icons 



[7 Snap to guides 

I" - Snap to grid 

[7 Snap to object outlines 



♦ The View tab contains options to show and hide rulers and guides, grid, 
labels, object outlines, and object icons, as well as options to set the snap to 
guides, grid, and object outlines. It also includes an option to set the grid 
width and height. 

♦ The Page tab is similar to tabs in Site view where you set page name, 
custom banner and button name, page status, and add comments. 

Page View Menus 

In Page view, the File menu includes commands to import or reference an HTML 
page and import a Word, Rich Text Format ( rtf), or text document. 

You can use the Undo command on Page view's Edit menu to reverse most actions 
since you last switched the page or view. The Edit menu contains the standard 
commands to delete, move, copy, and paste objects. It includes commands to select 
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the next and previous object, Layout, MasterBorder, and page, as well as 
commands to find and replace text. The Edit menu also contains the Custom 
Names command that you use to set custom banner and button names. 

The View menu contains commands to show and hide Page view's toolbars, 
Properties palette, Site Navigation palette, Object Tree palette, MasterBorder, page 
labels, object outlines, object icons, rulers, guides, and grid. Use this menu to 
control snapping to guides, grid, and object outlines, and to change the zoom factor. 

Use the Go menu to go to each NetObjects Fusion view, each Page view tab, the 
next, previous, parent, and child page, the last view, and recent pages. You can also 
search for named objects, follow a selected link to its destination, and preview the 
page or site. 

Use the Object menu to manipulate selected objects. The Object menu contains 
commands to align, distribute, arrange, size, show and hide objects. You can reduce 
the Layout and MasterBorder to accommodate the largest object in them. You can 
manipulate tables, open image files in an external editor such as a paint program, 
and restore an image to its original size. Finally, you can add links, anchors, and 
insert HTML tags into selected text. 



NetObjects Fusion 7.5 
supports cascading style 
sheets. With cascading style 
sheets you can specify text 
styles and apply them to a 
text object, a page, a site, or 
aSiteStyle.Formore 
information, see Chapter 
12, "Designing with Text, " 
in the NetObjects Fusion 
User Guide. 



Page View and Text 

Use the Text menu to show and hide non-printing text such as paragraph and line 
break characters. Use this menu to insert many types of objects, HTML code, 
symbols, fields, and files into selected text objects. 

You can change the text attributes of the standard HTML text styles supported by 
NetObjects Fusion. The Edit Text Styles command displays the Text Styles dialog. 
This dialog contains a drop-down list where you choose to apply the styles you are 
editing to the SiteStyle, site, or page. 

In Chapter 1 , "Building a Site in 10 Minutes," you added text and edited it using the 
Format tab of the Text Properties palette. Those edits applied only to that single 
text object. You can also edit text attributes in Style view, where they will apply to 
the SiteStyle, and therefore throughout every site that uses that SiteStyle. 



Layout Properties 

D Click the Layout to select it, so the Layout label is highlighted and the Layout 
Properties appear. 



The Layout Properties palette contains three tabs. 
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Page View 




H |E|o| 

Layout name: (HomeLayout 
Layout Page 
Width: [sTO [720 Pixels 

Height: [453 [ei5 Pixels 



- HTML output 


| Site Setting 




Tables: (* Columns C 


Rows Show | 


I Layout is a form 




I Center in browser 




HTML... 



The General tab contains the Layout name, which by default is the same as the 
page name. This tab also contains the Layout width and height, which you can 
change, and shows the resulting page width and height, which adjusts 
automatically. The page width or height is the sum of the Layout plus the 
MasterB order. Changing the Layout size does not change the MasterBorder 
size; it changes the page size. 

♦ Use the HTML output section to change the HTML standard for publishing 
this Layout. Do this only if you need a setting that is different from the 
Browser compatibility setting selected for the whole site. These settings 
are described in "Viewing Current Site Options" on page 36. 

♦ Press the Show button to view the tables NetObjects Fusion creates from 
your page layout. The heavy lines that appear show how the page is divided 
into tables. The emphasis on columns or rows in this arrangement depends 
on whether you select the Columns or Rows option. 

♦ This tab also contains options to make the Layout a form and to center the 
Layout in the browser. You can use the HTML button to insert your own 
HTML between the <HEAD> tags, inside the <BODY> tag, or at the 
beginning or end of the page body. 

The Background tab is where you select the color, picture, or sound for the 
Layout background. The default setting, Automatic, uses the background color 
or image specified in the SiteStyle, or if none is specified, the default 
background for the browser. 

The Actions tab is where you can assign an action, such as a transition or 
motion, to the Layout when it is displayed in the browser. 



42 



Chapter 2 Touring NetObjects Fusion 



MasterBorder Properties 



O Click in the MasterBorder so the MasterBorder label is highlighted and the 
MasterBorder Properties appear. 



MasterBorder Properties 



□ |a I o I 

Name: | DefaultMasterBor - | AddfEdit...| 



Margins (Pixels) 

Left: 1 140 ~t{ Right: flO ^ 
Top: [l02 ^ Bottom [go ^ 



The General tab contains the name of the MasterBorder assigned to the current 
page, and a button to add and edit MasterBorders. 

This tab also shows the size of the Left, Right, Top, and Bottom MasterBorder 
margins, which you can change here. Changing these dimensions can change 
the overall page size, but does not change the Layout size. 

The AutoFrames tab is where you turn on frames for each MasterBorder 
margin, and the Actions tab is where you assign actions to the MasterBorder. 



Do not drag Layout or 
MasterBorder handles at 
this time. 

Horizontal ruler — 



Rulers, Handles, and Guides 

The rulers appear in the unit of measurement set on the Program tab of the 
Application Options dialog, accessed from the Tools menu. The default is pixels. 
The horizontal top ruler shows the page width, which is 730 pixels when set to the 
default. The vertical side ruler shows the page height, which is 555 pixels when set 
to the default. 

Each ruler contains two MasterBorder handles, one at either end, and one Layout 
handle between them. Drag these handles to change the MasterBorder margins and 
Layout size. 



I 5 ? 0 , 



MasterBorder handle 



Guide handle 



Layout handle ' 
MasterBorder handle 
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Page View 



You can create and drag 
guide handles if you want. 



You use guides to align objects. Click the ruler where you want to create a new 
guide. Guides are color-coded: 

♦ When the MasterB order is selected, guides you create are red and appear for all 
pages with the current MasterBorder. 

♦ When the Layout is selected, guides you create are blue, and appear only on the 
current page. 

Drag a guide handle to move it. To delete a guide, drag its handle off the ruler. 
Use the Undo command on the Edit menu to restore margin positions . 



Site Navigation 
palette button 



Note: You cannot drag a margin handle if the MasterBorder or Layout will become too small 
to accommodate an object inside it, such as a banner, button navigation bar, text, 
image, or other object. 

Site Navigation Palette 

D If necessary, click the Site Navigation palette button at the bottom of the Page 
view window to open the Site Navigation palette. 



Site Navigation 



~ Home 
■~ Mission 
n Events 

i ^ Activities 

1 □ Highlights 

n Next Tour 
- n Contest 

; ^ Wonder Lodge 



Double-click a page in this window to open it in Page view. 
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Links 



Link icon 



1 . Select the Built with NetObjects Fusion logo in the bottom MasterBorder of the 
Home page. 



6> rams 

NetObjects 
FUSION 



Notice the small blue and white symbol on this image. This is the Link icon; it 
means this image has a link associated with it. This and other object icons are 
visible when Object Icons is selected on the View menu. 

When you select the image, the Picture Properties palette appears. 



Picture Properties 



a ]q|o I 

File: [ets\BuiltWithNOF.gif Browse... | 
AltTag: | Built VithNOF 



- Display 

(* Normal 




C Stretch 




r Tile 




| Show hotspots 


Link... | Anchor... | 


HTML... 



2. On the General tab, click the Link button. 

The Link dialog appears, showing the External Link settings. 
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Page View 



B 



Link type: 

New link: |http:// Jwww.netobjects. 
* External links: 



Name 


Content 




Net3b;ecti Home Page 


http./fw/wi. netobjects. corn 













































































Target: None C Existing: |_blank 



] C New: 



Link I Cancel 



The external link information tells you that when site visitors click this 
NetObjects Fusion logo, their browser takes them to a URL external to your 
site— in this case the NetObjects Home page at www.netobjects.com. 



3. Select Internal link on the Link type list. 



Link type: 
□ Internal links: 



B 



O Home 

n Mission 
B n Events 

! n Activities 

1 □ Highlights 

! n Next Tour 

- n Contest 

: Wonder Lodge 



C Current page 



arget: None C Existing: |_blank 



3 rn« f 



Link | 



An internal link is a link to a page in your site. 
4. Select Smart Link on the Link type list. 
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Link type: 



-IJ.XJ 



Select Blank to — 
create a blank link 
where you can add 
scripts or actions 



Name 


Description 




Home 


Links to youi Home page 




Up 


Links to the parent of she current page 




Newt Stacked Page 


Links to the next page in a set of stacked pages 




Previous Stacked Page 


Links to the previous page in a set of stacked pages. 




Newt Page 


Links to she sibling to the right or this page in the Site? true-fine. 




Previous Page 


Links to she siding to the left of this page in the SileStructure 




First Child Page 
Blank 


Links to the first child page of the current page. 

Creates an empty JavaScript link that can he used to assign an acfien. 













































Target: Hone C Exislrng: |_blank J C New: 

HTML... I Unlink || M. I Cancel 



The Smart Link tab contains links relative to the current page, such as up a 
level, next page, and previous page. These links automatically update as your 
SiteStructure changes. 

Select File Link as the Link type to enter the path and file name of a file to 
download into the browser window when the site visitor clicks the link. 

5. Click Cancel to exit the dialog. 



HTML Source View 

For more information, see You can use the HTML Source view in Page view to view the HTML that 
Chapter 27, "Working with NetObjects Fusion generates, and to insert your own HTML or other code into 
HTML Directly, "in your specific places in the code. 

NetObjects Fusion User 

H f 1. Click the HTML Source tab. 
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Page View 




The left side of this view is the Document Map. The Document Map lists each 
function at the top. The Functions folder contains the JavaScript functions for 
the rollover buttons in the button navigation bar. 

2. Click the minus sign (-) next to the Functions folder to collapse it. 

The Document Map lists all HTML tags on the page, with an identifying icon 
next to each one. 

♦ Click a minus sign (-) to collapse the tag list, and a plus sign (+) to expand 
it. 

♦ Click the X to close the Document Map. Right-click in the window and 
select Document Map from the shortcut menu to restore it. 

♦ Double-click an item in the Document Map to highlight its starting line of 
code in the HTML Source Editor. For example, double-click the very last 
item in the document map, <IMG> Pictured, to view the HTML code for 
the ImageMap.jpg picture you added in Chapter 1 . 

♦ Drag the column divider to change the width of the Document Map. 
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The HTML Source Editor on the right side of the window shows the HTML, 
JavaScript, or other code that comprises the page. This code contains complex 
tables and is generated by NetObjects Fusion. It appears on a gray background 
and you cannot edit it. To make the code easier to read, NetObjects Fusion 
shows each language element in a special color. 

You can insert code into any white space in the HTML Source Editor. You can 
also use the HTML button on many dialogs to insert HTML or other code into 
the page. 

You can click a blue plus (+) or minus (-) sign in the HTML Source Editor to 
expand or collapse this view. 

You can use the Find command on the Edit menu to find text in HTML Source 
view. For example, you could type ImageMap in the Find dialog and click the 
Find Next button to locate the HTML code for the lmageMap.jpg picture you 
added to the Home page. 

Page Preview Tab 

In Page view, you can preview the current page without switching to another view 
or launching an external browser. 

Z) Click the Page Preview tab to preview the current page. 
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File Edit View Go Object Text Tools Help 



Home 



Mountain Jacques 
Experience the best nature has to offer.. 




1 :: :ej M ; > : ;\ \c: k : : 



■ Page Preview tab 



Style View 



1 . Click the Style button to go to Style view. 

If you followed the steps in Chapter 1, "Building a Site in 10 Minutes," you 
have already seen how to view and assign SiteStyles in Style view. 

You can create your own SiteStyles and edit existing SiteStyles in this view. 

The Style menu contains commands to create a new style, browse styles online, 
add and remove styles, add SiteStyle sources, and edit style elements. To edit a 
style, you must clear the Read only check box on the Style Properties palette. 
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In Style view, the control bar contains the Set Style button, which you use to 
assign the style you are viewing to your site, and an Add Styles button, which 
adds the current style to your Active SiteStyles list. You can browse and 
download additional styles to use in your sites . 

2. Click the Text tab to view the text settings for the SiteStyle. 
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Edit View Go Style lools Help 

y & r? [cT 

lire Site Page Style 

■ , i I 

- . Active SiteStyles 
<J> Mountain 

: NsK'bjscjs Fusion Local SiteStyie; 
.0 Airbrush ed - Gold 
% Aura -Green?. Yellow 

_, flora -Rsd^Purpii; 



_, Capsula - E 

_, Capsule - ( 

, , Gapsola ■ 

_, Capsula ■ 

__, Cityscape - Gold 

__, Cityscape - Purple 

_, Cityscape - Teal 
% Comic 
^ Corporate 

_, Crossblockll - Gold & Crimson 



J FusionZap - Purple 
^ FusionZap -Turquoisi 
\ FusioriZap -Yellow 



Body text style sample. Lorern ip sum, Dolor sit 
amet, consectetuer aciipiscmg el it. sed ciiam nonurn. 



Paragraph text style sample. Lorem ip sum, Dolor sit 
amet, consectetuer aciipiscmg elit. sed ciiam nonurn. 



I ext Object style sample. Lorern ip sum, Dolor sit 
amet, consectetuer aciipiscmg elit. sed ciiam nonum. 



j (Studio WetDb|M 



[ ][ ][ X't-.L] 



Heading 1 

Heading 2 
Heading 3 



You can format selected 
text in Page view using the 
Properties palette. Such 
formatting overrides text 
settings in the SiteStyie. 



Use the Text tab in Style view to set text attributes for the HTML text tags and 
objects supported by NetObjects Fusion 7.5. 

When you specify text attributes for the Body text element, the attributes 
automatically ripple through all the text objects and tags in the view. You can 
edit each object to further specify its attributes. 

When you add text to the Layout it automatically appears in the font and style 
specified in Style view. You can override the style settings for the text object by 
selecting the text and changing it on the Format tab of the Text Properties 
palette. 

Ultimately, if no text attributes are set in the HTML sent to the browser, the 
browser uses its own defaults. In NetObjects Fusion, there is always a SiteStyie 
assigned, but often the text settings for the SiteStyles are Automatic, which 
means "Use the default." The default is the browser setting unless it has been 
overridden by a setting in the SiteStyie, site, page, or text object. 

SiteStyles are available to every site on the system, so if you change a text 
setting in a SiteStyie, you affect every site that uses it. You can change text 
attributes for just the open site using the Edit Text Styles command on the 
Object menu in Page view. 



52 



Chapter 2 Touring NetObjects Fusion 



Assets View 



Assets 



Assets view is where you manage all the assets in your site. Assets are any file you 
place in your site, such as files containing images, sounds, movies, and so on. 

1 . Click the Assets button on the control bar. 

Assets view appears with the Files tab selected. 



» NetObjects Fusion 


My Site. nod 






File Edit Gp &55el5 


Tools Help 






*, & 








Online Site 
Files 


Page Style 


Assets Publish ' New Asset 






|Typ» 


In Use | Location | Size 


Date Verify Status 


addToCartButton 
FJuiltWrthHOF 
buyFJutton 
HauLeft 


Image 
Image 
Image 
Image 


C: "NetObjects Fusion 7.:?J_lser Sir ddToCartBut... 1 KB 
CWetObjects Fusion 7.51lser SitesWySiteVVssetsCiuitiMhNOF.. 3KB 
C NetObjects Fusion 7. S'JJser S ires \\1 y Sit eWsset stiuyButto ri.gif 1 KB 
CWetObiects Fusion 7 SUser Sir.esW/SiteiAssetsWsvLeit gif 1KB 


714/2003 6:47:18... 
4j8/2003 8:59:48... 
714/2003 6:47:18... 
714/2003 6:46:58... 



The Files view shows all file assets known to the site. The columns in this view 
tell you the asset's file name, its type, whether it is currently in use, its path, 
size, and creation date. The Verify Status column reports the results of the 
Verify All File Assets command on the Assets menu, and tells you whether the 
asset is actually in the location specified by the path. 

You can click a column heading to sort by that heading, and drag column 
dividers to change the column widths . 

2. Click the Links tab. 



■ NetObject* Fusion - Mountain Jacques. nod 










File Edit 


Go Assets Tools Help 










Online 


A r? © (5 © 

Site Page Style Assets Publ 


sh 


New Asset 


IF 


Files Links 


Da 


a Objects j 


Variables 






I Link To 


Type 


I Target 


Verify Status 


1 


jHanjH 

_self 
jbop 

1 letOI>jects Horn* Pnye http://wwvv .netobjects .com 


Link Target 
Link Tercet 
Link Target 
Link Target 

External (none) 







The Links view lists all the links currently registered in the site, including the 
default link targets. Although the button and text navigation bars contain links, 
these are managed internally by NetObjects Fusion and are not listed here. 

The external link currently assigned in this site is the link to the NetObjects 
Home Page, which you examined when you selected the Built with NetObjects 
Fusion logo in "Links" on page 45 . 



53 



Publish View 



The Data Objects and Variables tabs show data objects and variables used in the 
site. The default entries are a data object named Sample and a variable named 
My Address. Data objects define database information from either internal or 
external sources. In Assets view you can create, edit, and delete user-defined 
variables used within the site. 

The Assets menu varies slightly depending on the selected tab. Generally it 
contains commands to add a new asset, delete all unused file assets, open an asset, 
and verify all assets. 



Publish View 



Publish view is where you set up publishing parameters and select whether to 
publish locally to your computer for testing or remotely to a Web server for public 
viewing. 

D Click the Publish button to go to Publish view. 

With NetObjects Fusion you can specify the directory structure you want to publish 
to your Web server. By default this structure is created in a special Publish directory 
in the NetObjects Fusion 7.5\User Sites folder. 



' NetObject* Fusion - Mountain Jacques. nod 



File Edit Go Publish Tools Help 



& @ O 

Site Page Style 



Assets Publish Preview Site Publish Settings Publish Sit: 



Contents of location 


[contents oF directory t 








Name 


Type | Attributes | Last Remote Publish 


| Last Local Publish 


EE-LH assets 


lassets 


Folder 




1 LH html 


|html 


Folder 






0\ index, html 


HTML... Never Published 


Never Published 



The Publish view window shows the directory structure that will be uploaded to 
your server in the left pane, and descriptive information in the right. 

Use the Arrange Files command on the Publish menu to select how files appear in 
Publish view and are sent to the Web server. This view shows publishing by Asset 
Type, where assets are in one directory and HTML files are in another. You can 
publish with a flat directory structure, where all assets and files are in one directory, 
or by site structure, where all the HTML and asset files for a given page are in a 
folder of the same name, and the index.html file, and all banners, buttons, and other 
NetObjects Fusion files are in the root. Finally, you can create your own custom 
directory structure. 
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The columns show the file name of the asset or .html file, its type, attributes, and 
whether it was remotely or locally published. 

The Publish view control bar contains the Publish Settings and Publish Site 

buttons. 

♦ Use Publish Settings to set up local and remote publish profiles. 

♦ Use Publish Site to publish the site. In the Publish Site dialog you can select a 
page, section, or entire site, and publish all or changed assets only. 

Use the Transfer Files to Server command on the Publish menu to transfer the site 
to a Web server. 

Use the View/Delete Server Contents command on the Publish menu to view or 
delete files on the local or remote computer. 

Because some NetObjects Fusion and third-party components must be published 
inside the <HEAD> tag of the HTML page and others must be in the body, you can 
specify the order in which to publish components using the Publish Components 
command on the Publish menu. 

Where To Go From Here 

This completes your tour of NetObjects Fusion 7.5. Now you understand how site 
development flows from view to view, and generally what you do in each view. You 
also understand how to set options for the program and for the site. 

All the concepts in this chapter are explained in detail in the NetObjects Fusion 7.5 
User Guide, and in the online Help system. 

Continue to the next lesson, Chapter 3, "Designing Site Navigation," and the 
remaining lessons, to learn how to put NetObjects Fusion to work for you. 



55 



Where To Go From Here 
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Designing Site Navigation 

Now that you have built a SiteStructure and are familiar with basic NetObjects 
Fusion features, you can set up site navigation so visitors can easily move between 
pages. 

To complete the lessons in this chapter, you must have followed the steps in 
Chapter 1, "Building a Site in 10 Minutes," to create the Mountain Jacques site. 

This lesson shows you how to: 

♦ Create a new MasterBorder 

♦ Create a graphic with linked hotspots 

♦ Use JavaScript submenus 

♦ Create a custom navigation bar 
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Creating a New MasterBorder 



If you remove the button 
bar before you create a new 
MasterBorder, you remove 
the button bar from every 
page in the site that uses 
the DefaultMasterBorder. 



To make the Home page design unique, you can use the Mountain Jacques graphic 
as a navigation aid instead of the button navigation bar. You add hotspots to the 
button labels on the graphic and link them to the appropriate pages . 

Because the hotspots provide navigation aids for the page, you can remove the 
button bar from the Home page, but you want to keep it on all the other pages. To 
accomplish this you create a special MasterBorder for the Home page, then remove 
its button navigation bar. 

1. Open the Mountain Jacques site. 

2. Display the Home page in Page view. 

3. Click in an empty area of the MasterBorder, so the MasterBorder Properties 
palette appears. 



□ la I o I 

Name: | DefaultMasterBor - | AddJEdit...| 

Margins (Pixels] 

Left: 1 140 ~t{ Right: fit) ^ 
Top: [l02 ^ Bottom [so ~t{ 



The Name field shows the MasterBorder assigned to this page— 
DefaultMasterBorder. This drop-down list shows all MasterB orders in the 
open site. 

NetObjects Fusion also provides a ZeroMargins MasterBorder, which sets all 
margins to zero, so you can create pages with no borders. 

4. On the General tab of the MasterBorder Properties palette, click the Add/ 
Edit button. 
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Edit MasterB order List 




5. In the Edit MasterBorder List dialog, click the Add button. 

6. In the Name field of the New MasterBorder dialog, type 

HomeBorder 

Leave it based on DefaultMasterBorder. 

OH 



New MasterBorder 



Name | HomeBorder 



Base on | DefaultMasterBorder ^1 
| OK | Cancel | 



7. Click OK. 

The new MasterBorder name appears on the Properties palette, and the Name 
drop-down list now shows three MasterBorders, with HomeBorder selected. 



MasterBorder Properties 



E 0 ]o 



Name: | HomeBorder T 


| Add/Edit... 


IZeroMargins 
M .arai D efaultM asterB order 




HomeBorder 




Left: |140 Right: 


10 -rj 


lop: |102 -rj Bottom: [50 




HTML... 



8. Select the navigation bar in the Left MasterBorder, then press the Delete key. 
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Creating an ImageMap 



Home 



, IJ°J 




Mountain Jacques* 
Experience the best nature has to offer. 




Hotspot 
Rectangle 

tool 



This removes the navigation bar from the MasterBorder named HomeBorder, 
which is assigned only to the Home page. The other pages still use the 
DefaultMasterBorder, thereby retaining the button navigation bar. 



Creating an ImageMap 



An imagemap is a graphic with linked areas called hotspots. 

1. On the Standard toolbar, click the Hotspot: Rectangle tool. 

If the Rectangle tool is not showing, point to the Hotspot tool, hold down the 
left mouse button, and select Rectangle from the flyout. 

2. Move the pointer over the picture. 

A wide border surrounds the picture, which shows it is selected for adding 
hotspots. 
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Wide border shows — 
picture is selected for 
adding hotspots 



J Mountain Jacques* 



Mission^ V^fci™ 



Drawing a hotspot . 



3. With the wide border showing, drag a box around the Mission button on the 
graphic . 




^> l^H 

X *^t-*' Contest 



The Link dialog appears. 

4. Select Internal Link as the Link type. 

5. In the SiteStructure select the Mission page. 
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Creating an ImageMap 



Link | Internal Link 

□ Internal links: 
I -Q Hoi 



B--^ Events 

| n Activities 

i □ Highlights 

| n Next Tour 

S-O Contest 

n Wonder Lodge 



3 



Name 




Ingne] 





















































Current Disqa 1 




6. Click Link. 

The rectangular hotspot appears selected on the picture, and the Properties 
palette shows Rectangle Hotspot Properties. 



The hotspot and its 
properties 




7. Place the pointer over a handle. When the pointer changes to a double-sided 
arrow, you can drag the handle of the hotspot to adjust its size. 

8. Double-click the Rectangle Hotspot tool to prevent it from reverting to the 
Select tool. 

9. Drag a rectangle around the Next Tour button. 
The Link dialog appears again. 
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10. In the SiteStructure, double-click Next Tour to create the link. 



To turn off hotspot outlines, 
dear the Show hotspots 
check box on the General 
tab of the Picture Properties 
palette. 



11. In the same way, draw hotspot rectangles around the Events button and link it to 
the Events page, and around the Contest button and link it to the Contest page. 
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Creating an ImageMap 




Preview Site 



The Preview tab in Page 
view previews a single page 
only, so you cannot use it to 
test links. 



J 


1" I 1 ? 0 , 


J. 


, , |2<?0 |3Q0 |5<?0 |6QO 


, , , u 














Mountain Jacques* 












Experience the best nature has to offer... 































15. Click the Preview Site button on the control bar to preview the entire site, and 
click the hotspots on the Home page to test the internal links. 
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Notice the button and text navigation bars on each page. The navigation bars on the 
Mission and Next Tour pages include the Home page and the four pages on the first 
level of the site. All the buttons are displayed in the primary button style associated 
with the Mountain SiteStyle. 



3Ne>it Tol 


r - Microsoft Internet Explorer 




Inlxl 


J Els SM 


View Favorites Tools Help 




« 


]#.-■> 








J Address | 


C:\NetObjeccs Fusion 7.5 \Usei Site*\Mountain Jacques\Preview\nexfc_tour.hfcmi 




Links 




Join the Mountain Jacques 
Special Rock Climbing Expedition June 9-16! 




The navigation bars on the Events and Contest pages include the Home page, the 
pages on the first level, and the child pages of the current page— Activities and 
Highlights for the Events page and Wonder Lodge for the Contest page. The child 
page buttons are displayed in the secondary button style associated with the 
Mountain SiteStyle. 



65 



Adding JavaScript Submenus 



■'5 Events - Microsoft Internet Explorer 




inlxl 


j File Edit View Favorites Tools Help 


«l 


j <-•-►- 9 1 a j, -j j 






Address | C:\NetObects Fusion 7.5 \User Sites\MountainJacquesVPreviewVevents.html 




J Links 





Child pages of 
current page 
displayed in 
secondary 
button style 




Events 



Events 



Actvities 



Highlights 



Next Tour 



Contest 



[Horn el [Mission! [Events] [Aclvitiesl [Highlights! [Next Tour! [Contest! 

IS! M ^ Computer 



Adding JavaScript Submenus 

By default, a navigation bar includes the Home page, pages on the first level of the 
site, and the child pages of the current page. Instead of including child page buttons 
on the navigation bar, you decide to use JavaScript submenus. When a site visitor 
moves the mouse pointer over a navigation bar button, the child pages will pop up. 

1 . Display the Events page in Page view and click the button navigation bar. 

The Navigation Bar Properties palette appears. 
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5 IfclhlOl 

Display - 



Type: | Primary 



Orientation: | Vertical ' | 

Navigation structure 
(* Site: | First Level 
C Custom: Edit Custom... | 

Multi level options 



Include home page 
|~" Include parent page 
[7 Include child pages 
f - Include JavaScript submenus 



In the Navigation structure section of the General tab, note that First Level is 

selected. This means that all pages on the level under the Home page in the 
SiteStructure are included in the navigation bar. 

2. In the Multi level options section: 

a. Leave Include home page selected. 

b. Clear Include child pages to remove the child page buttons from the 
navigation bar. 

c. Select Include JavaScript submenus to display the child pages as pop-ups 
when a site visitor moves the mouse pointer over the parent page button. 

3. Click the Advanced tab. 

You can change the JavaScript submenu button type or SiteStyle on this tab. For 
now, you use the default settings. 

4. Click the Preview Site button on the control bar to preview the site and test the 
JavaScript submenus. 



Preview Site 
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Adding a Custom Navigation Bar 



•=J Events - Microsoft Internet Explorer 



File Edit View Favorites Tools Help 



^Back g& | ^Search [^Favorites ^gfMedia &\%~ M M * M\ 



-2 R 



Address |^] C:\NetObjects Fusion 7.5 \User 5ites\Mountain Jacques\Preview\events.htm 
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Adding a Custom Navigation Bar 

The Highlights page of the site will feature photos of last year's annual mountain 
bike tour. To make it easy for site visitors to get additional information about 
mountain biking, you can add a navigation bar button that links to the Specialized 
Bicycle Web site. 

1. Display the Highlights page in Page view. 

2. Click in the MasterBorder. 

3. On the General tab of the MasterBorder Properties palette, click the Add/ 
Edit button. 

Because you want this link to appear only on the Highlights page, you create a 
new MasterBorder. 

4. In the Edit MasterBorder List dialog, click the Add button. 

5. In the Name field of the New MasterBorder dialog, type BikeBorder. 
Leave it based on DefaultMasterBorder. 
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13 



Name: |BikeB order 



Jlx| 



Base on: | DefaultMasterB order "^1 
| OK | Cancel 



6. Click OK. 

The new MasterBorder name appears on the Properties palette, and the Name 
drop-down list now shows four MasterBorders, with BikeBorder selected. 

7. Select the button navigation bar. 

8. On the Navigation Bar Properties palette, select Custom and click Edit 
Custom. 

The Custom Navigation Bar dialog appears, showing the SiteStructure with 
the Internal Link type selected. The Home page is already added to the 
navigation bar on the right side of the dialog, which shows the name of the link, 
the name that will appear on the navigation bar button, and the image to be used 
on the button. 



Custom Navigation Bar 



Link type: 



H Internal links: 

™ Mission 
Events 

i ^ Activities 

i □ Highlights 

\ CI Next Tour 

- n Contest 

; n Wonder Lodge 



Find Again 



Custom navigation bar: 





Link Name 


Display Name 


Imaae 




Add> | 


0 Home 


Home 


Standard 







































































































































































9. On the left side of the dialog, select the Mission page. 
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Adding a Custom Navigation Bar 



Add button 



Using the Custom option, 
you can add pages from 
different ievels into the 
same button navigation 
bar. 



10. Click the Add button to add the Mission page to the navigation bar. 

11. In the same way, click and add the Events, Activities, Next Tour, and Contest 

pages. 

Note that you can add pages on different levels of the site. 



Custom Navigation Bar 



Litlk ^P e: | Internal Link 



H Internal links: 
n Home 
^ Mission 
^ Events 

j ^ Activities 

i □ Highlights 

Next Tour 

J Wonder Lodge 



~3 Find.. | Find Again | 



Custom navigation bar: 





Link Name Display Name 


Image 




Add> | 


□ Home Home 


Standard 






□ Mission Mission 


Standard 






□ Events Events 


Standard 






□ Activities Activities 


Standard 






□ Next Tour Next Tour 


S tandai d 






□ Contest Contest Standard 


















































Remove All | 





























































± 



12. Select External Link from the Link type list. 

13. In the New link text field, type www.specialized.com and click Save. 

14. With the new entry highlighted in the External links list on the left, click the 
Add button. 

15. Click the new entry in the Display Name column, type Specialized, and press 
Enter. 
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Chapter 3 Designing Site Navigation 



'WO'- | External Link ^ Find | Find Again | 



New link Ihtrp:// ~r] www.specialized.com 



4 External links: 


Custom navigation bar: 








Name 


Content 






bink Name 


Display Name 


Irnaae 






NetObjects Home... 


http: // www. nelo. . . 




Add> | 


3 Home 


Home 


Standard 






www. specialized... 


http: 1 Vww | A | .spe... 






"D Mission 


Mission 


Standard 














3 Events 


Events 


Standard 














"D Activities 


Activities 


Standard 














3 Next Tour 


Next Toui 


Standard 














"D Contest 


Contest 


Standard 


































































Remove | 




















































Remove All | 




































Move up | 





























































OK Cancel 



16. Click OK to close the custom navigation bar dialog. 
The custom navigation bar appears in the MasterBorder. 



I 1° h°°, , J I 200 I 300 l 6 ? 0 Puj J 


1 

■=> 

§: 


r 














[Homel ffvli ssi on! [Eventsl [Activities! [Hiahliahtsl [Next Tour! [Contest] I 



17. Preview your site and test the links in the custom navigation bar. 
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Where To Go From Here 



Where To Go From Here 

You just learned to create MasterBorders and use imagemaps and MasterB orders as 
navigation aids when publishing Web pages. You also learned to create a custom 
navigation bar. 

To learn more about MasterBorders, see Chapter 10, "Managing MasterBorders" 
and Chapter 18, "Creating Navigation Bars and Banners" in the NetObjects Fusion 
7.5 User Guide or the online Help system. 

The next lesson, Chapter 4, "Placing Pictures in Text," shows you how to import a 
Word document into the Layout, add a picture inside its text box, and wrap the text 
around the picture. 
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CHAPTER 4 



Placing Pictures in Text 

The Mountain Jacques mission statement was created using Microsoft Word. 
Without changing the format you can put the mission statement on the Mission 
page and add a picture. 

To follow the steps in this lesson, you must have created the Mountain Jacques site 
described in Chapter 1 , "Building a Site in 10 Minutes." You also must have 
Microsoft Word installed on your system. 

This chapter shows you how to: 

♦ Import a Microsoft Word document into a page 

♦ Add a picture inside a text box 

♦ Align text around a picture 

♦ Move a picture inside a text box 
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Importing a Word File 



Importing a Word File 

In NetObjects Fusion, a text box can be a container object. You can add and arrange 
other objects inside it. When you move the text box, the objects remain in position 
in the box. This makes it easy to arrange other objects around the text box on the 
page. 

Importing a Word file into the Layout area creates a text box, just as if you use the 
Text tool to draw a text box and type and format text inside it. 

1. Open the Mountain Jacques. nod site in the NetObjects Fusion 7.5\User 
Sites\Mountain Jacques folder. 

2. Display the Mission page in Page view. 



I 1° hw , j fop fop W |l J tJ J 




3. From the File menu, choose Import>Document. 



Note: If you do not have Word installed on your system, this option is not available. 

4. In the Import Document dialog, navigate to the NetObjects Fusion 7.5\Tutorial 

folder, and select the Mission.doc file. 
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Chapter 4 Placing Pictures in Text 



Picture File Open 



Folder | Image Assets | 

Look in: | Pj Tutorial" 







History 




X 




Desktop 


My 




jter 


My K 


etwor 





"3 E 



ZD AdBanners 

^] Catalog [&f mtnbiker . jpg 

_j 1TML [&f twobikers.jpg 

Z] Photo Gallery 

I Sounds 
P] Activities.doc 
^ boyclimber.jpg 
jffgirlbiker.jpg 
.^f girldirnber.jpg 
.|Jf IrnageMap.jpg 
_J Mission.doc 



5. Click Open. 

A progress message appears, and the Word document appears in the Layout. 



I 




Mission 



ial at Mountain Jacques is to provide an exhilarating, memorable, and 
satisfying adventure experience for all our participants, in any season, and any 
mountain environment!} 

vlountain Jacques promotes a variety of active tours in alpine lakes, rivers 
neadows, mountains, and forests.H 

The Mountain Jacques staff is committed to assisting you, our tour guest, in 
earning new skills and improving existing ones. lj 

3y guiding and encouraging you to enjoy your activity and accomplish a personal 
goal, we ensure you have a great vacation experience, and lookforward to 
•eturninq for more 



[Home] [Mission! [Events] [NextTourl [Contest] 



6. Click in the Layout to select the text box, so the Text Properties palette shows 
the Text Box tab. 
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Adding a Picture Inside a Text Box 




Mission 



lew ,| 



,_F'J 



aranSaLlfSlirJicqu 
stisfying adventure experience for all our 
fountain environment H 

fountain Jacques promotes a variety of a 
neadows, mountains, and forests.! 

The Mountain Jacques staff is committed I 
earning new skills and improving existing!! 

3y guiding and encouraging you to enjoys 
3oal,we ensure you have a great vacatior 

- I II l II 




any 



[Homel [Mission] [Event' 



l~~ Lock, height 

I? Size Layout to 

r Canter™, 

|~~ Tent boa is aft 



Setting; ... | 



Notice the text box has a wide border and does not show any object handles. 
This is because the default option for imported text is Size Layout to Text. 
When this option is selected, the text assumes the size of the Layout, and you 
cannot resize the text box. 

♦ You can clear the Size Layout to Text check box to view the familiar solid 
object handles that indicate you can resize the text box. If you clear this 
option, click the check box again to reselect it before you continue. 

♦ You can double-click the text box to display the Format tab of the Text 
Properties palette. 

Now you can insert the picture into the text box. 



Picture tool 



Adding a Picture Inside a Text Box 

1. Select the Picture tool from the Standard toolbar. 

The pointer changes to a crosshair. When you move it over the text box, the text 
box outline changes to a wide blue border. The crosshair pointer carries a wide 
blue insertion point with it. 
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Chapter 4 Placing Pictures in Text 



Wide blue insertion point 





Mission 

adventure experience for all our participants, in any season, and any 
enwonmentf|l 

Jacques promotes a variety of active tours in alpine lakes, rivers, 
mountains, and forests If 



"he Mountain Jacques staff is committed to assisting you, our tour guest, in 
SSrning new skills and improving existing ones Tj 



3y guiding and encouraging you to enjoy your activity and accomplish a 
joal. we ensure you have a great vacation experience, and look forward 

mm. 



[Homel fMissionl [Events! [Next Tour! [Contestl 



You don't have to draw a 
box to place the picture. 
Just click to position the 
upper left corner of the 
image. 



2. Place the wide blue insertion point just after the last word in the first paragraph, 
and draw a picture box. 




I 2 ? 0 , 



,J*J 

i 



ia at Mountain Jacques is to provide an exhilarating, memorable, and 
sati sfyl ng adventure experience for all our participants, in any season, and any 
nountain environment.!] , 

vlountain Jacques promotes a variety of active tours in; alpine lakes, rivers, 
neadows, mountains, and forests.!] : 

The Mountain Jacquesistaff is committed to assisting y^ou, our tour guest, in 
earning new skills and improving existing ones. Tl '■ 



3y guiding and encouraging you to enjoy your activity and accomplish a personal 
goal, we ensure you have a great vacation experience, and look forward to 
eturninq for more. 



[Homel [Mission! [Events! [Next Tourj [Contestl 



3. In the Picture File Open dialog that appears, navigate to the NetObjects Fusion 
7.5\Tutorial folder and select mission.jpg. 
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Adding a Picture Inside a Text Box 



Picture File Open 



Folder j Image Assets | 
Look in: | Q Tutorial 



AdBanners 

Dhtml 


jjf I rnageMap.jpg 




2] Photo Gallery 


gff rntnbiker.jpg 


Hi Sounds 


Iff rjwobikers.jpq 


&f boyclirnber.jpg 




^ girlbiker.jpg 




^ girlclirnber.jpg 







File name: [mission. jpg 




□ pen 




Files of type: jWeb Images ( K .gif; K . pg; K .ipeg; K .png) 


zi 


Cancel | 




R Show thumbnail image 



4. Click Open. 

The picture appears with its upper left corner at the location where you began 
drawing the box. The picture is selected, and the Picture Properties palette 
appears. 




I |3;o, , 



Mission 



•BBS-- : ■ :'t i i 1 i t.' ' JiWi.i- I'll i> :m- . y . i ■ — i ■ ■ :\-~_ :\ yi 



■ ■ a u in any season, and any 



nountain environment. 




I 



AIITag; | 

Normal 
r Tile 



I - Show\ 



Vlountam Jacques promotes a variety of active tours in alpine lakes, rivers, 
meadows, mountains, anclforests.Tl 



5. On the Picture Properties palette, click the Align tab. 
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Chapter 4 Placing Pictures in Text 



\Mimm 

Alignment 

r b» a, 

(* Jop C Middle C Bottom 

B S 3 

C° Left C Center P Right 



■1=1*1 



f Left Q| 
wrap 



Hi r Ri9t3t |Q 





0|J-=l^e -=MUUMU UU|t^L 




Horizontal: |d 


Vertical: |0 



The icons on the Align tab show how the text aligns itself in relation to the 
picture. 

The default alignment is Top, which aligns the text at the insertion point with 
the top of the picture. 

6. On the Align tab, select Right wrap. 

The text wraps around the picture, and the embedded object icon appears. 



Blue and white embedded 
object icon denotes insertion 
point for picture in text box 




|2W , , | 



l*w , 



al at Mountain Jacques is to provide an exhilarating, memorable, and 
satisfying adventure experience for all our participants, in any season, and any 
mountain environment 



,J"J 



Mission 



vlountain Jacques promotes a variety of active 
:ours in alpine lakes, rivers, meadows, mountains, 
and forests TI 

The Mountain Jacques staff is committed to 
assisting you, our tour guest, in learning new skills 
nd improving existing ones. H 

3y guiding and encouraging you to enjoy your 
activity and accomplish a personal goat we ensure 
/ou have a great vacation experience, and look 
: orward to returning for more. 




[Home] [Mission! [Events! [Next Tour] [Contest] 
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Adding a Picture Inside a Text Box 



This alignment is good, but you would like to move the picture up. 

7. Make sure the picture is selected, so at least some of its handles show. 

8. Move the pointer over the picture and press the mouse button, so you see the 
wide blue border around the text box. 

9. Start dragging slowly upward. 

As you drag, the picture remains where it is, and the pointer displays the wide 
blue insertion point. 

10. Move the wide blue insertion point to the upper left corner of the Layout, at the 
beginning of the text, and release the mouse button. 

The picture moves up next to the top paragraph of text. The Alignment option is 
still set to Right wrap, and now the picture is where you want it. 

11. On the Align tab, in the Space around object section, set Horizontal to 2 and 
Vertical to 4. 




al at Mountain Jacques is to provide an 
exhilarating, memorable, and satisfying adventure 
experience for all our participants, in any season, 
and any mountain environment.]! 

vlountain Jacques promotes a variety of active 
ours in alpine lakes, rivers, meadows, mountains 
and forests .1 

The Mountain Jacques staff is committed to 
assisting you, our tour guest, in learning new skills 
and improving existing ones. lj 

3y guiding and encouraging you to enjoy your 
activity and accomplish a personal goal, we ensurs 
/ou have a great vacation experience, and look 
orward to returning for more 



fHomel fMissionl fEventsl [NextTourl f Contest! 




12. Click the Page Preview tab to preview the page. 
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Chapter 4 Placing Pictures in Text 



File Edit View Go Object Text Tools Help 








& & [© & m & 




<$■ 




Online Sits Page Style Assets Publish 


new Page Preuiew Site 


Publish Site 








Mission 



Our goal at Mountain Jacques is to provide an 
exhilarating, memorable, and satisfying adventure 
experience for all our participants, in any season 
and any mountain environment. 

Mountain Jacques promotes a variety of active 
tours in alpine lakes, rivers, meadows, mountains, 

and forests 

The Mountain Jacques staff is committed to 
assisting you, our tour guest, in learning new skills 
and improving existing ones. 

By guiding and encouraging you to enjoy your 
activity and accomplish a personal goal, we ensure 
you have a great vacation experience, and look 
forward to returning for more. 




Mission] [Events] fNextTourl [Contest] 
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Where To Go From Here 

You just learned another way to use text boxes in page layouts, how to insert objects 
into a text box, and how to align text around these objects. 

For more information on text boxes, see Chapter 9, "Working with Text Boxes" in 
the NetObjects Fusion 7.5 User Guide and in the NetObjects Fusion online Help 
system. 

When you use text boxes to lay out pages, NetObjects Fusion generates lean 
HTML. When you use the Size Layout to Text option, NetObjects Fusion 
generates the leanest code because it eliminates HTML tables in the Layout portion 
of the page. For more information on HTML output options, see Chapter 7, 
"Controlling Published Output in the NetObjects Fusion 7.5 User Guide and in the 
NetObjects Fusion online Help system. 

The next lesson, Chapter 5, "Creating a Photo Gallery," shows you how to add a 
photo gallery to your site. 
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Where To Go From Here 
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CHAPTER 5 



Creating a Photo Gallery 

To show highlights of each type of activity Mountain Jacques offers, you decide to 
display photos of previous trips. Using the NetObjects Fusion Photo Gallery tool, 
you can create a professional presentation with little effort. In this chapter, you set 
up a gallery that features photos of a Yosemite hiking trip. 

To follow the steps in this lesson, you must have created the Mountain Jacques site 
described in Chapter 1, "Building a Site in 10 Minutes." 

This chapter shows you how to: 

♦ Create a photo gallery 

♦ Add pictures to the gallery 

♦ Format the thumbnails page 

♦ Format the photo pages 
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Adding Pages for the Photo Gallery 



Adding Pages for the Photo Gallery 

Each photo gallery includes two types of pages: a thumbnail page, which displays a 
small image of each picture in the gallery, and photo pages, which display one 
image to a page. You add the thumbnail page and NetObjects Fusion automatically 
adds the photo pages for you. 

1. Open the Mountain Jacques. nod site in the NetObjects Fusion 7.5\User 
Sites\Mountain Jacques folder. 

2. Go to Site view. 

3. Select the Activities page and add a new page. 

4. Name the new page Hiking. 

5. Display the Hiking page in Page view. 



. KJ J 





I 



M 

Photo Gallery tool 



6. Select the Photo Gallery tool from the Advanced toolbar and click in the upper 
left corner of the Layout area. 

It's a good idea to start in the upper left corner of the Layout to allow as much 
room as possible for the images. You can adjust the position later, if necessary. 
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Chapter 5 Creating a Photo Gallery 



If photo galleries are 
already associated with the 
site, you may see a larger 
dialog. If this happens, use 
the Create a new Photo 
Gallery option. 



7. In the Add Photo Gallery dialog, type Yosemite as the name of the gallery and 
choose Default as your profile. 



Add Photo Gallery 



Please provide a name for your Photo Gallery This will be 
used to save trie gallery so yau can reuse it at a later lime. 



Name: |Vos 



Prolile: | default ^ 
(Help?! | OK | Cancel | 



8. Click OK. 



Before you begin to add 
photos, it's a good idea to 
organize the pictures you 
want to include into a 
single folder so you can find 
them easily. 



Adding Photos 



After you add the gallery component, the next step is to add photos. You should be 
looking at Open dialog window. 

1. Navigate to the NetObjects Fusion 7.5/Tutorial/Photo Gallery folder. 

2. Press Ctrl+A to select all four files in the folder. 



Lookjn: | Q Photo Gallery 



"3 *■ m d° n- 





File name: | "Campsite jpg" "Falls. |pg" "Guides jpg" "HalfDo T 

Files of_type: (image Files (*.gif:'.ipg:'.ipeg;*.tiff;*.fif;*.bmp;*.pc ^ | 
Use lila name ror life [excludes extension] 

Tip: To select multiple images, press Shifl+Click or Ctrl+Click. 
To select all images, press Ctrl+A. 



You can select one, all, or as many files as you like. 
3. Click Add. 

The files you selected are listed in the File Name column and the highlighted 
file is shown in the Thumbnail Image Preview. 
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Adding Photos 



Photo Gallery Properties Editor: Yosemite 



Images j Thumbnail Page j Photo Page | 
Images in display order: (4 images in gallery) 



File Name 


Title 




Falls.jpg 






Guides.jpg 






HalfDorne.jpg 































Move Up 



Move Down 



Caption: 



Thumbnail Image 

Preview: (actual size) 



Photo Image | 

Output Settings - 




File type: | JPEG _J 
Quality: | High 3 



1 85 3 Percent 



Approximate download time: 0.5 sec @ j 56.6 Kbps 
File Size: 2.6 KB 



Rotate: | 0" (no rotation) 



Apply to All 



You can give each photo a title and/or caption or just let the picture speak for 
itself. 

4. Select HalfDorne.jpg and in the Title field, type Half Dome. 

5. In the Caption field, type Rising over 4,000 feet above the valley floor, Half Dome is the 
most recognized symbol of Yosemite. 



Photo Gallery Properties Editor: Yosemite 



Images j Thumbnail Page j Photo Page j 
Images in display order: (4 images in gallery) 



2lJ 



File Name 


Title 




Campsite, jpg 






Falls.jpg 






Guides, ioa 






HalfDorne.jpg 





























Title: 


Add 


Half Dome 




Remove 


Caption: 




Remove All | 


Rising over 4,000 feet above the valley floor. 


d 




Half Dome is the most recognized symbol of 




YosemiteJ 




Move Up | 






Move Down | 




d 



6. Select Campsite.jpg and enter Accommodations as the title. 

7. For the last two pictures, enter Waterfalls and Mountain Jacques Guides as the titles. 
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Chapter 5 Creating a Photo Gallery 



For more information about 
these output settings, see 
Chapter 14, "Creating Photo 
Galleries, "in the NetObjects 
Fusion 7.5 User Guide. 



Photo Gallery Properties Editor: Yosemite 



Images | Thumbnail Page j Photo Page j 
Images in display order: (4 images in gallery) 



File Name 


Title 




Carnpsite.jpg 


Accommodations 




Falls.jpg 


Waterfalls 




iGuides.iDQ 


Mountain Jacques Uuide; 




HalfDorne.jpg 


Half Dome 



























Add 



Remove 



Move Up 



Title: 

| Mountain Jacques Guides 
Caption: 



You enter the captions later, directly on the photo page. 

The ALT Tag field is automatically populated with the Title of your photo. 

8. Select HalfDorne.jpg and in the ALT Tag field, type Half Dome. 

9. For the other three pictures, enter Campsites, Waterfalls and Mountain Jacques Guides 
as the ALT tags. 

You use the Output Settings on the Thumbnail Image and Photo Image tabs at the 
bottom of the Images tab to balance display quality and download time so your site 
visitors are not waiting a long time for your photos to appear. For this lesson, the 
default settings are fine. 



Next you set up formats for the thumbnail page and the photo pages. 



Formatting the Thumbnail Page 

The thumbnail page shows a small preview of each image in the gallery. Site 
visitors click a thumbnail to go to the photo page. NetObjects Fusion includes a 
variety of templates you can use to display the thumbnails. For example your 
pictures can appear in a film strip or a series of slides. 

1 . Click the Thumbnail Page tab. 
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Formatting the Thumbnail Page 



Photo Gallery Properties Editor: Yosemite 



Images 
Format: 

C Tent Link: |Yosemite 
(* Thumbnails 

Template: | Film 

Columns: |~4 



Thumbnail Page | Photo Page | 



~3 Style: [Fined Width 



Preview: (scaled to fit) 




Film Fixed Width: 

Film Fixed Width is a good all purpose Thumbnail template that 
mimics the look of a film strip. Fixed width means that when the 
film strip contains landscape and portrait photos each row will be 
the same length. To achieve this the thumbnails are centered on 
a neutral gray background. 

• Allows thumbnails to be resized to any dimension 

• Works against any background 

• Automatically numbers each photo sequentially 



Save Profile... | Done 



2. From the Template list, select Slide. 

Note the additional options. Each thumbnail template has options consistent 
with its theme. As you change the settings, the result appears in the Preview 
window. 

3. Leave the Style set to Shadow. 

4. Set Columns to 2. 

Since you have four images in this photo gallery, this will arrange them in two 
rows of two. 

5. If necessary, clear Include title because you don't want to display the title of 
each image on the thumbnail page. 

6. Click Done to see the Thumbnail page. 



88 



Chapter 5 Creating a Photo Gallery 



, hW , J: 




The thumbnails are bounded by a green border. You can change the order of the 
images within the green border, but you cannot move the images around the 
page individually; when you move one, you move them all. 

7. Drag the photo gallery so it is centered under the page banner. 



89 



Formatting the Thumbnail Page 



| 1° hW , J \«l<> |5?D |B?D J 




2) 



I [Home! rMissionl [Eventsl [Activities! [Highlights! [NextTourl [Contestl I 

The files are displayed in the order in which they are listed in the File Name 
column. You want to change the order to put the scenic photos first. 

8. Click the Half Dome photo and drag it to the upper left position in the gallery. 

9. In the same way, drag the campground photo to the lower left corner. 
Use the red arrows for guidance as you drag. 
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Chapter 5 Creating a Photo Gallery 




Formatting the Photo Pages 

Each photo page can contain an image, a title, and a caption in a layout that you 
choose. You also select a frame template for the photo and format the photo title 
and caption text. The layout and text formats you select on the Photo Page tab are 
reflected on all photo pages. Changes you make directly on a photo page apply only 
to that page. 

1 . Click the Photo Page tab . 
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Formatting the Photo Pages 



Photo Gallery Properties Editor: Yosemite 



Images j Thumbnail Page Photo Page j 
Layout: 



Tent Attributes: — 
Format Title... | 



Format Caption. 



J 



V Display title in banner 



Template: | Bevel 
Preview: (scaled to fit) 



_zJ Style: | Crimson 




Bevel is a good all-purpose photo template that resembles a 
beveled plastic frame. It works in many different scenarios. 



• Allows photos to be resized to any dimension 

• Works against any background 



When selecting a layout, 
consider the shape of your 
photos and the amount of 
text you want to include in 
the caption. 



The text format should 
match or compliment the 
SiteStyle. 



2. Select a Layout. 

In each sample layout, the square with the X represents the photo, the bold line 
represents the title, and the text block represents the caption. The pictures in this 
guide use the default layout, but you can experiment with other layouts. 

The layout you select applies to all photo pages. 

3. Click Format Title. 

The Object Format dialog appears. 

On the tabs of this dialog you select text formats for all the photo pages. As you 
make changes, the new format is displayed in the preview window. 
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Chapter 5 Creating a Photo Gallery 



Select a template that is 
coordinated to your 
SiteStyle. 



Character | Paragraph! Borders | Background | 



Font: 




Style: 




Automatic 


1 rebuchet MS 


±i 


Automatic 


Tw Cen MT 


Regular 


! w Cen MT Condensed 




Italic 


Tvi Ce i MT Condensed E;-:tra 6 


Bold 


Verdana 




Bold Italic 



Color; (Automatic | Position: [Automatic 

Letter case: (Automatic Decora 
Small caps: (Automatic 



[^Automatic 

□ Underline 

□ Dverline 

□ Strikethrough 



The quick brown fox jumps over the lazy dog, 



73 
J 



1 his preview might not show the format you'll see on your page- because the text might be 
influenced by an additional style. To lean about the scope of styles, pleiis see Help. 



a. On the Character tab, set Font to Arial, Style to Bold, and Size to 1. 

b. On the Paragraph tab, select center Alignment. 

4. Click OK. 

5. Click Format Caption. 

6. On the Character tab, set Font to Arial, and click OK. 

The text formats you select here for the title and caption apply to all photo 
pages. 

Next, you select a frame template for the photo. 

7. In the Photo Frame section of the dialog: 

a. Select the Simple border Template. 

The corresponding template options appear. 

b. Leave Border width set to 1. 

c. Choose black as the border color. 

8. Click Done to close the Photo Gallery Properties Editor. 
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Formatting the Photo Pages 



For more information about 
saving profiles, see Chapter 
14, "Creating Photo 
Galleries, "in the HetObjects 
Fusion 7. 5 User Guide. 



You use the Save Profile option at the bottom of the Photo Gallery Properties 

Editor to save the settings associated with a specific photo gallery so it can be 
used for the next photo gallery created. For this lesson, we will not create a 
profile. 

Look at the Site Navigation palette. NetObjects Fusion added a page named 
Yosemite to the site. The new page icon shows multiple pages and has the same 
name as the photo gallery. This icon represents the photo pages. The actual 
number of pages adjusts to accommodate as many or as few photos as you add 
to the gallery. 



Site Navigation 



~ Home 

Mission 
n Events 
S Activities 

i-O Hiking: 

; n Yosemite - 

O Highlights 
n Next Tour 
- n Contest 

n Wonder Lodge 



-Thumbnail page 
-Photo pages 



n 



Photo page icon 



Double-click the photo page icon on the Site Navigation palette. 
The first photo page appears. 

You use the navigation buttons on the control bar to move to the next and 
previous photo pages, and to add or delete a page. The three navigation buttons 
below the banner provide a way for site visitors to move to the next or previous 
photo, or back to the thumbnail page. 



10. Click the Next and Previous buttons to display the Half Dome page. 



94 



Chapter 5 Creating a Photo Gallery 



File Edit View Go Object Text Tools Help 

ft? & [& © V @ 



Use these buttons in 
Page view to navigate 
through the photo pages ' 
and add or delete pages 



When you publish your 
site, visitors use these 
buttons to navigate 
between photo pages 
and back to the 
thumbnail page 




11. Press Shift and click the photo gallery and each navigation button to select all of 
these objects. 

12. Press the right arrow key to move the selected objects so they are centered under 
the banner. 
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Formatting the Photo Pages 




i li i i i i I 2 ? 0 t 3 ? 0 , i i i i i , 



l°P l 7 i 



Yosemite 





Rising over 4,000 feet above the valley floor, Half Dome is 
the most recognized symbol of Yosemite 



[Home! [Mission! [Events! [Activities! [Highlights! [Next Tour! fContestl 



-/ 



Next 



This centers the objects on all photo pages . 

13. Click the Next button on the control bar to move to the waterfall photo page. 

14. Click in the caption text field and type: Peak viewing time for waterfalls is in the spring. 

15. On the next two pages add the following captions: 

a. Campground page: The Mountain Jacques staff takes care of your campground 
reservations. 

b. Guides page: K.C. and Jennifer lead the way on your daily hikes. 

16. Preview the site. 
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17. Click the up arrow to return to the thumbnail page and then click an image to go 
to the photo page. Use the left and right arrows to move between photo pages. 

Your photo gallery is complete. 

Where To Go From Here 

You just learned how to put your digital images on the Web using the NetObjects 
Fusion Photo Gallery tool. For more information about photo galleries, see Chapter 
14, "Creating Photo Galleries" in the NetObjects Fusion 7.5 User Guide and in the 
NetObjects Fusion online Help system. 

The next lesson, Chapter 6, "Creating Dynamic Pages," shows you how to add 
actions to objects. 
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Where To Go From Here 
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Creating Dynamic Pages 

Using Dynamic HTML on the Next Tour page will generate excitement for the 
upcoming rock climbing expedition. To view objects in motion, your site visitors 
must use Microsoft Internet Explorer 4.0 and above or Netscape Navigator 4.x. 

To follow the steps in this lesson, you must have built the Mountain Jacques site 
described in Chapter 1, "Building a Site in 10 Minutes." 

This lesson shows you how to: 

♦ Add pictures 

♦ Add and size text 

♦ Use the Object Tree 

♦ Add actions to objects 

♦ Add a background sound 

♦ Set the HTML output option 
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Adding Objects 



Picture tool 



Adding Objects 

First you add all the objects intended as targets of DHTML actions. 

1. Open the Mountain Jacques. nod site in the NetObjects Fusion 7.5\User 
Sites\Mountain Jacques folder. 

2. Display the Next Tour page in Page view. 




Next Tour 







Width: |58[i 
H^aM: \ r JS3 


Page 

~ZZj I 7:,:i Pii!els 

fE55 Pixels 




Tables: CoIj 


Tins r Rows 5how| 


r Layout 1S 


a form Sellings... | 








HTML... | 



: !]± jis? . n ;.; nt; ] [Ne xi _; > ; > st[ 



3. Make sure Snap to Object Outlines is selected on the View menu to make it 
easy to place and move objects without overlapping other objects. 

4. Select the Picture tool and click in the upper left of the Layout. 
The Picture File Open dialog appears. 

5. On the Folder tab, navigate to the NetObjects Fusion 7.5\Tutorial folder, select 
girlclimber.jpg, and click Open. 
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6. Select the Picture tool and click to the right of the girl climber picture. 

7. In the Picture File Open dialog, navigate to the NetObjects Fusion 7.5\Tutorial 

folder, select boyclimber.jpg, and click Open. 



I2IJQ, |3QC |49CI 
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Adding Objects 



If the red exclamation point 
icon appears, move the 
pictures so they do not 
overlap. With one or more 
objects selected, press an 
arrow key to nudge the 
selected object. 



8. Drag the two pictures so they meet in the middle of the Layout under the 
banner. 




9. Select the Text tool and draw a wide rectangle below the two pictures. 



I 1° , J |3?o Hqo |5?o |e?o I^J J 
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10. Type the following: 

Join the Mountain Jacques Special Rock Climbing Expedition June 9-1 6! 

11. Drag through all the text, or triple-click anywhere in the text to select it. 

12. With the text selected, on the Format tab of the Text Properties palette: 

♦ Select +2 from the Size drop-down list. 

♦ Click the Bold button. 

♦ Click the Align Center button. 

13. Click to place the insertion point after the word Jacques and press Shift+Enter 
to force a line break. 

14. If necessary, drag the edges of the text box toward the edges of the Layout so 
the text occupies two lines. 



I 1° I 1 W J 1=9° E3° Ht° P9° I°9° I'U J 




Join the Mountain Jacques*. 
Special Rock Climbing Expedition June 9-16! 



. | I !■■ l| I I |l I T I l| " I !■ | 
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Using the Object Tree Palette 



Object Tree button 



Click the plus sign to 
view the navigation 
bar button names — 



Layout name- 



Objects in this Layout - 



Using the Object Tree Palette 



1 . Click the Object Tree palette button in the lower left corner of the Page view 
window. 



Next Tour 



DefaultMasterBorder 
Q BuiltWithNOF — 
— - NavigationBar2 
E NavigationBarl 
Banner 1 
- 0 NextTourLayout 
LTJ-A Textl 



U Picture3 
E3 Picture2 



- Page name 

First picture on page is 
NetObjects Fusion logo, 
inside the MasterBorder 



■ Highlighted name shows text 
box selected in Layout 



You cannot use ASCII or 
blank characters in object 
names. 



The Object Tree shows the hierarchy of all objects on the current page, using 
an outline view. 

The MasterBorder section, labeled DefaultMasterBorder in the Object Tree, 
shows all objects in the MasterBorder. The Layout section, labeled 
NextTourLayout, shows all objects in the Layout. 

2. In the Layout, select the picture of the girl climber. 

The Object Tree highlights the name of the selected object so you can identify 
it. 

If this is the first picture you placed in this Layout, it appears under 
NextTourLayout as Picture2. (Picturel is the BuiltWithNOF logo in the 
DefaultMasterBorder.) 

3. In the Object Tree, click Picture2, or the name associated with the girl climber, 
so it is selected. 

4. Click in the name to select the text for editing. 

5. Type Girl to give the object a descriptive name. 
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Next Tour 
□■■■[3 DefaultMasterEorder 
H EuiltWithNOF 
[+]■■■— NavigationBar2 
{ NavigationBarl 
S Banner 1 
- 0 NextTourLayout 

S-A Textl 
H Picture3 
H Girl 



6. Click Picture3, or the name associated with the boy climber picture, to select it; 
click again in the name so you can edit it, then rename the picture Boy. 



Next Tour 
□■■■[3 DefaultMasterEorder 
H EuiltWithNOF 
[+]■■■— NavigationBar2 
{ NavigationEarl 
S Banner 1 
- 0 NextTourLayout 

S - A Textl 
H Boy 
H Girl 



Adding Actions to Objects 



Now you can add DHTML actions to animate the objects on the page. 

1. Select the Girl picture in the Layout and click the Actions tab on the Picture 
Properties palette. 

2. Clear the Object initially visible in browser check box. 

This means that when this page is loaded the object will not be visible. 
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Adding Actions to Objects 



Picture Properties 



Q ]E3 o I 



Object ID: [Girl - 
t initially visible in bi i 



-Name of selected object 



- Clear to make object initially 
invisible in browser 



3. Click the Plus (+) button at the bottom left. 
The Set Action dialog appears . 

EH 



When: | Clicked 



Standard Action 



larget: frJiiT 
Message: | 
Parameter(s): | 



7^ 



J 



i Uascade message 



Name of action 

When to perform action 
Object doing the action 

Action performed by object 



The Name field shows the default action name, Actionl. 

4. In the When field, click the arrow to display the menu, point to Page, then 
select Page Loaded. 
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Name: Actionl 



When: |Page Loaded 
| Standard Action 



EE] 




This means that Actionl will happen when the browser loads this page. 

In the Action section, the Target field shows the action will happen to the object 
named Girl, which was selected when you began formulating this action, and is 
therefore the default target. 

5. In the Message field, select Motion>Fly from the menu. 

When you select an option from the message list, the appropriate parameters 
become available. 

6. In the Parameters field, select In From Bottom Left from the menu. 



ET£] 



Name: Actionl 



When: Page Loaded 



| Standard Action 



3 
"3 



larget: [fJiN~ 



Message: |Fly 



Parameter(s): In From Bottom Left 



P Cascade message 



d 

'4 



Action to perform 



Parameter for action to 
perform 



7. Click OK. 
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The Actions tab for the Girl picture now shows the action you created, 
described in a few words. 



Picture Properties 



a ]ra o | 

Object ID: [ciirt~ 



|~~ Object initially visible in browser 



H^ctii 



,ction1 - On Page Loaded do Fly 



+ ^7 



Select or clear check box to 
enable and disable the action 



■ Click plus and minus buttons 
to add and delete actions 



Action icon 

To view object icons, select 
Object Icons from the View 
menu. 



The check mark next to the action enables it. 

The Action icon, a right-pointing triangle in a small pink circle, appears on the 
Girl picture, indicating an action is assigned to it. 



J P, 



h?o, , J |a?o, 



I 3 ? 0 , 





Next 

4 




8. With the Girl picture still selected, on the Actions tab of the Picture 
Properties, click the Plus (+) button again. 



The Set Action dialog appears, showing Action2 in the Name field. 
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UZ1 



When: | Clicked 
[Standard Action 




"3 
d 

J 



\ Cascade message 



1 



J 



- Click Target Browse button 
to open Object Tree 



9. In the When field, select Motion>Motion Ended. 

10. Click the Target field Browse button (...) to display the Object Tree. 



□■■■0 DefaultMasterBorder 
Q BuiltWithNOF 
NavigationBar2 

i NavigationBarl 

Banner 1 
- 0 NextTourLayout 
j- A Textl 

'■■■■a Boy 

QB 

OK 



^1 



Cancel | 



Select target from 
Object Tree 



11. In the Object Tree, select the Boy picture, then click OK. 

Boy appears in the Target field of the Set Action dialog. 

The target of the action is the Boy picture. When the Girl picture stops moving 
the Boy picture does something. 

12. In the Message field, select Motion>Fly. 

13. In the Parameters field, select In From Bottom Right. 
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Action2 


[Motion Ended 




►1 




\ 



Iff 

|ln From Bottom Right 
\ Cascade message 



Perform action when this happens to 
object selected in Page view 

This object performs the action 



14. Click OK. 

Now two actions are listed on the Actions tab for the Girl Picture Properties. 



Picture Piopert 



□ |0 o] 

Object ID: [Girl 

|~~ Object initially visible in browser 

^ Actionl ■ On Page Loaded do Fly 
\y/ Action2 ■ On Motion Ended do Fly 



+) -) 



A~7 



Click arrows to move selected action up or 
down in list to change the order in which it 
occurs 



15. Select the Boy picture. 

16. On the Picture Properties palette, click the Actions tab. 

17. Clear the Object initially visible in browser check box. 

18. Click the Plus (+) button at the bottom left. 
The Set Action dialog appears. 

19. In the When field, select Motion>Motion Ended from the menu. 

20. In the Target field, click the Browse (...) button, select Textl from the Object 
Tree, and click OK. 



21. In the Message field, select Motion>Fly from the menu. 
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22. In the Parameters field, select In From Left from the menu. 



When the Boy picture stops 
moving, the Texti object 
flies in from the left. 



Make the text initially 
invisible in the browser, so 
the text does not appear 
before it flies in. 



Name: |Action1 
When: jMotion Ended 



Standard Action 



Target: |Text1 
Message: [Fly 



Parameter(s): |ln From Left 



V Cascade message 



23. Click OK. 

The Actions tab for the Boy picture shows a description of the action you 
created, and the Action icon appears on the Boy picture. 



Picture Proper* 




24. To complete the sequence, select the Text box you added to the Layout. 

25. On the Text Properties palette click the Actions tab. 

26. Clear the Object initially visible in browser check box. 

Adding a Background Sound 

A background sound provides the finishing touch for this page. 
1. On the Layout Properties palette, click the Background tab. 



Ill 



Setting the HTML Output Option 



2. In the Sound section, select the Sound check box. 

3. In the Background Sound dialog that appears, click the Browse button. 

4. On the Folder tab of the Open dialog, navigate to the NetObjects Fusion 

7.5\Tutorial\Sounds folder, select NextTour.aif, and click Open. 

5. In the Background Sound dialog, select the Continuous loop check box, and 
click OK. 



Layout Properties 



H E> |o 

Background 



_ 



Color: | Automatic 
Image: | Automatic 



Fv | NextTour.aif 



"3 nil 



This option is discussed in 
"Viewing Current Site 
Options" on page 36 and 
"Layout Properties" on 
page 41. 



Setting the HTML Output Option 

The default HTML output option for an entire site is Dynamic Page Layout. You 
can view this setting by choosing Options>Current Site from the Tools menu. The 
Browser compatibility field on the General tab shows the HTML output setting 
for the entire site. 

You can override this setting and manually set the HTML output option for a page 
on the General tab of the Layout Properties palette. 

♦ Most actions display correctly with the Dynamic Page Layout setting, and this 
setting works with all browsers. 

♦ Actions display most efficiently with the Fixed Page Layout setting, but this 
setting only works with Microsoft Internet Explorer 4.0 and greater and 
Netscape Navigator 4.x. 



♦ Actions containing overlapping objects require the Fixed Page Layout setting. 
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For more information on 
HTML output options see 
Chapter 7, "Controlling 
Published Output" in the 
NetObjects Fusion 7.5 User 
Guide. 



Layout Properties 



h Mo I 



Layout name: (NentTourLayout 
Layout Page 
Width: [sit) [730 Pixels 

Height: [393 [s55 Pixels 

HTML output - 




|~~ Center in browser 



Preview Site 

To stop the sound, dick the 
Stop button on the browser, 
or switch to another page. 



Previewing the Next Tour Page 



O Click the Preview Site button on the control bar to preview the site. 



j File Edit View Favorites Tools Help 



I 



Address j C:\Neiubjects Fusion 7.5 \User Siies\Mouniain Jscc.ues\Preview\ne>fMcui.htrrii 



ft Go j ] Links 




Next Tour 





[ Home] [Mission] [Events] [Next Tour] [Contest] 



\~\M c< 
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Where To Go From Here 



To view the whole action sequence again without previewing, reload or refresh 
the page, or navigate to the page from another page. 

To preview in Page view, click the Page Preview tab. To stop the sound, click 
the Page Design tab. To review the action sequence, click the Page Preview tab 
again. 



Where To Go From Here 

You just created cross-platform Dynamic HTML. 

For more information about actions, see Chapter 22, "Building Dynamic Pages" in 
the NetObjects Fusion 7.5 User Guide and the NetObjects Fusion online Help 
system. 

The next lesson, Chapter 7, "Working with HTML Files," shows you how to 
convert an existing HTML file into NetObjects Fusion format, and how to reference 
and edit an HTML file that is external to NetObjects Fusion. 
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Working with HTML Files 

To generate public interest and collect email addresses for advertising, Mountain 
Jacques is sponsoring a contest and giving away a week's lodging at a special 
resort. To announce the contest, you import an HTML page created in another 
program into the Mountain Jacques site. When you import an HTML page into a 
NetObjects Fusion site, it is converted to NetObjects Fusion format, and you can 
edit the page in Page view as usual. 

A second HTML page provides information about accommodations at the lodge. 
You reference this page from the Mountain Jacques site rather than importing it and 
formatting it. This file will not be converted to NetObjects Fusion format. To edit 
this file, you edit the original HTML. 

To follow the steps in this lesson you must have built the Mountain Jacques site in 
Chapter 1, "Building a Site in 10 Minutes." 

This chapter shows you how to: 

♦ Import an HTML file 

♦ Spell check the text on a page 

♦ Reference an external HTML file 

♦ Edit the referenced HTML 
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Importing an HTML File 



When you import an HTML file it is converted into NetObjects Fusion format so 
you can edit the page in Page view as usual. 

1. Open the Mountain Jacques. nod site in the NetObjects Fusion 7.5\User 
Sites\Mountain Jacques folder, and display the Contest page in Page view. 

2. On the Contest page, click the Layout to select it. 



JA 




Contest 



B |b|o| 

Layout name; Con ten La you 



Layou 



Page 



Width; |esc ^j| 73CI Pinsls 
Heijht; [393 [555 Pine-Is 

-HTML output 



SiieSetiirK 
Tables: Columns C F 



"3 



I Layout is alorm Sei 



JjTMl I 



3. Choose Import>HTML Page from the File menu. 

4. In the File Open dialog, navigate to the NetObjects Fusion 7.5\Tutorial\HTML 

folder. 

5. Select Contest.htm and click Open. 

NetObjects Fusion imports the HTML file with its referenced assets into a text 
box in the Layout. 
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Text inside text box ■ 



Text box and Layout are ■ 
initially the same size 




, IM J 



Contest 



Win a week at Wonder Lodged 



Mountain retreat with ski-in ski-out -i 



access to cross country and downhill skiing.!] 




Write in 25 words or less:]] 

"Why I love Mountain Jacques'H 

Winning statement will be selected by^ 
Mountain Jacques staff, and may appear in our advertisments H 

Type your entry and submit it to B iues.com 



6. Click once in the Layout to view the selected text box and Text Properties. 

7. Clear Contents wrap to browser width. The warning icon disappears. 
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On the Text Box tab of the Text Properties palette: 

♦ Lock height sets the minimum height for the text box in the browser. 

♦ Size Layout to Text prevents resizing the text box, makes the Layout the 
exact size of the text box, and generates lean HTML code. 

♦ Contents wrap to browser width allows the contents of a text box to wrap 
to the browser's width. This option requires that the Layout is sized to the 
text so no objects are outside the text box. It also requires that the page has 
no MasterB orders, that is, the MasterBorder margins are set to zero, or the 
ZeroMargins MasterBorder is selected. 

♦ Text box is a form lets you place form objects inside a text box. 

You can edit inside this text box just as you would any other NetObjects Fusion 
text box. 

To make sure you didn't import a document with spelling errors, you check the 
text on the page. NetObjects Fusion offers a choice of checking the whole site 
or just the current page. 

8. From the Tools menu, choose Spell Check>Current Page. 

NetObjects Fusion identifies a misspelled word and suggests a correction. 
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Preview Site 



Not in Dictionary: |acVertisrnents. 
Change to: p 



advertisements 



Suggestions: 



advertisements' 



Options... | 



Ignore ~j Ignore All | 

Change | Change All | 

Add | Suggest | 
Cancel | 



9. Click Change to accept the suggestion and click OK to acknowledge the 
correction. 

10. Click the Page Preview tab or the Preview Site button on the control bar to 
preview the page. 



File Edit View Go Object Text Tools Help 




-inlxl 




Contest 
Win a week at Wonder Lodge! 

Mountain retreat with ski-in ski-out 
access to cross country and downhill skiing. 




Write in 25 words or less: 

"Why I love Mountain Jacques" 

Winning statement will be selected by 
Mountain Jacques staff, and may appear in our advertisements. 

Type your entry and submit itto Bob@tvlountainJacgues.com . 
[Horn e] [Mission] [E&gnts] [ftfait Tour! [Contest] [Wander Lodge! 



~r~ r 
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Referencing External HTML 



When you reference an HTML file, the file remains external to the NetObjects 
Fusion nod file and is not converted to NetObjects Fusion format. To edit it, you 
edit the HTML in the HTML Source tab of Page view or in an external editor. 

1 . Display the Wonder Lodge page in Page view. 




Wonder Lodge 



, KJ J 



2. Choose Reference External HTML Page from the File menu. 
The Reference External HTML Page dialog appears. 

3. Click the Browse button, navigate to the NetObjects Fusion 7.5\Tutorial\HTML 

folder, select Wonder Lodge.htm, then click Open. 



Reference External HTML Page 



JLj*l 



Page: | C:\NetObjects Fusion 7.5\Tutorial\HTML\Wondi | Browse... | 
Options 



W Import {HEAD >: | Append to Current <HEAD> ^ 
f" Do not manage or move assets 
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The default settings in this dialog can remain unchanged: 

♦ You import the head when your HTML file has scripts, META tags, or other 
contents between the <HEAD> and </HEAD> tags that you want to retain 
when NetObjects Fusion publishes the page. 

♦ One HTML head is allowed per page. Every NetObjects Fusion page 
contains a <HEAD> tag. You can select Append to Current <HEAD> to 
include the contents of both heads in one, or you can select Replace 
Current <HEAD> from the drop-down list to use only the contents of the 
page you are referencing. 

♦ NetObjects Fusion locates and manages the assets referenced by this HTML 
file. NetObjects Fusion reads the IMG SRC tags and other associated asset 
tags to find the images that go with this file and then modifies these file 
names to work with the new page location. 

4. Click OK. 
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Home 
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Next Tour 










Contest 


















Wonder Lodge.htm 
Last Modified: 4/10/2002 1:06:48 AM 
File Size: 1.37KB |1405 bytesj 
















+ Double-click to edit this HTML file * 

































In the Layout area, NetObjects Fusion displays a message showing the name of 
the referenced HTML file, the date and time it was last modified, and its size. 

5. Click in the Layout area to select the External HTML object and display the 
External HTML Properties. 
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Use the External HTML 
Properties to size the HTML 
object, convert it to 
NetObjects Fusion format, 
or edit the HTML source 
code. 



External HTML Properties 



m|o| 

File: | C:\NetObjects Fusion 7\TutoriaKH 



■J 



1^ Size to layout 



U on vert to Fusion 



Edit HTML File 



6. Click the Page Preview tab to preview the referenced page. 



NetObjects Fusion - Mountain Jacques. nod 


File Edit View Go Object Text Tools Help 


a? a (c? © » $ ~ 

Online Site Page Style Arrets Publish New Pege 


Preview Site Publish Site 




■ Page Design j HTML Source ] Page Preview 








Wonder Lodge 



Wonder Lodge 
Alpine City's most famous winter resort 




Snowriders relax at our mid-mountain day lodge 

Gear up in QUI Mountain Spoils Shop 
Stay warm in our comfortable rooms with fireplace 
Enjoy gourmet ilininij in our oozy Alpine Restaiiiant anil Lounge 
Choose frorrr our complete line of new and rental snowridinij equipment 
Derrro hiuh-peifomrance cross country anil ilownhill skis anil snowboards 
Arrange uioup and piivate lessons tin orruh oul Guest Services Desk 

[Home] [Mission] [Events! [NextTour] [Contest] [Wonder Lodge] 



To avoid redundancy and save space, you can delete the "Wonder Lodge" text at 
the top of the referenced HTML file, leaving the banner text to announce the 
resort. 
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7. Click the Page Design tab to return to the page Layout. 

8. Double-click in the external HTML placeholder. 

NetObjects Fusion displays the HTML file in the HTML Source tab of Page 



Click to place insertion - 
point at top of HTML 
Source Editor 



i 



■ g mm 
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I <METfo 
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i m <TITLE> 
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I BR ;BR> 
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a <img> 






■BR <BR> 






-Q (IMG> 






-BR (BR> 






-H <IMG> 






-BR <BR> 






-rj (IMG> 






-BR <BF\> 






□ (IMG> 





¥inn=13 HEIGHT=13> Stay to 
niI>TH=13 HEIGHT=13> Enjoy 
BIbT(t=13 HEIGHT=13> Choose 



9. Click in the top of the HTML Source Editor to place the insertion point at the 
beginning of the HTML source. 

10. Choose Find from the Edit menu. 

11. In the Find what field, type 

Wonder Lodge 







Find what: |Wonder Lodge 


Find Next | 


|~ Match whole word only 
|~ Match case 


Cancel 



12. Click Find Next twice. 
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The first Find locates the Wonder Lodge title inside the <HEAD> tag for the 
page. The second Find locates the Wonder Lodge in the page body, which is the 
one you want to delete. 

13. Click Cancel to close the Find dialog. 

14. Click once in the HTML Source Editor to deselect the text. 

15. Drag through the text, including the line break tag, <BR>, to select it, and 
delete this text from the page body: 

Wonder Lodge <BR> 




3- □ Tag: 
S-B (HTMb- 
B~Q <HEAD) 

: <™ <META> 

<m> <META> Generate 

i m <TITLE> 

<META; Template 
Et-% <B0DY> 

••> <F0NT> 
!-f <P> 
B-B <B> 

\ BE iBR> 



<META NAHE= ,r Template" C0HTEHT="C: X Pic 
</HEAD> 



soft Office\Of£iceMitKi.l.rl( 



</BX/rOKJ<P JUIGJT="a 
<F0WT FACE="Arial r ' SIZE 



:IHG 3RO-skilodge.gif" CTH.T&3 
)R= r ' #00 80 00 ,r >< P AL I GE = " C EHTER">- 



>52></Px/DIH> 



<IMC : 
<IMG ",?£- 
<IHC ■■■■ 



'Bull i 



. .■ 13 ! 

:dth=13 he: 
v 13 -: 



iifr=13> Stay uaE 

> Enjoy gourmet dining : 

■GHT=13> Choose from our compl. 

13> Demo high-performance 

13> Arrange group and pti' 



;ou£et«ahi£ 



ins with fireplace > 

-l Alpine Restaurant an. 
f new and rental snowr: 



16. Click the Page Preview tab. 

The Save Files dialog appears, telling you the file has been edited. 



124 



Chapter 7 Working with HTML Files 



You can see the 
ExternalHTMU object 
name in the Object Tree 
under WonderLodgeLayout. 
To view the Object Tree, click 
the Object Tree button. 



The following files have been edited. Check the files you wish to save. 



0 ExternalHTML.1 (C:\Net0bjectsFusion7.5\Tutorial\HTML\Wonderl 



1 



lJ 



External HTML1 is the name of the HTML object in the Layout. 

17. Click the Save button. 

The view switches to the Page Preview tab, showing the preview of the edited 
HTML file. 

The original file, NetObjects Fusion 7.5\Tutorial\HTML\Wonder Lodge.htm, is now 
edited and no longer contains the top line of text. 



File Edit View Go Object Text Tools Help 

0 A |c? © m 



Pege Design 




Wonder Lodge 
Alpine City's most famous winter resort 




Snowriders relax at our mid -mountain day lodge 

Gear up in our Mountain Sports Shop 
Stay warm in our comfortahle rooms with fheplace 
Enjoy gourmet <lining in out cozy Alpine Restaurant and Lounge 
Choose from our complete line of new and iem\il snowridinu. equipment 
Demo high-perfoimance cross-country and downhill skis and snowhoards 
Arrange group find private lessons thiouuh oui Guest Services Desk 

[Home] [Mission] [Events! [Next Tour] [Contest] [Wonder Lodge] 
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Where To Go From Here 



Where To Go From Here 

You just learned to import and convert HTML files into NetObjects Fusion format, 
where you can edit the file in Page view without changing the original file, and how 
to reference an HTML file and edit it from Page view. 

For more information on HTML files, see Chapter 23, "Referencing and Editing 
External HTML" and Chapter 27, "Working with HTML Directly" in the 
NetObjects Fusion 7.5 User Guide. 

The next lesson, Chapter 8, "Adding a Rotating Ad Banner," shows you how to add 
a NetObjects component, set its properties, and publish your site locally. 
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CHAPTER 8 



Adding a Rotating Ad Banner 

In this chapter you use the NetObjects Fusion rotating Ad Banner component to 
place advertisement banners on the Contest page and link the banners to other 
pages and sites. A component is a pre-built mini-application that adds interactivity 
to your site without custom programming or scripting. With the Ad Banner 
component you can assign links and transition effects to images. 

To follow the steps in this lesson you must have built the Mountain Jacques site in 
Chapter 1, "Building a Site in 10 Minutes." 

For illustration purposes this chapter uses the Contest page developed in Chapter 7, 
"Working with HTML Files," where you imported the HTML contest flyer onto the 
page. You can follow the steps in this chapter even if you did not import the HTML 
file onto the Contest page. 

This chapter shows you how to: 

♦ Place an Ad Banner component 

♦ Set properties for the component 

♦ Publish your site 
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Placing a Rotating Ad Banner Component 



Placing a Rotating Ad Banner Component 

You are going to use the NetObjects Fusion rotating Ad Banner component to place 
a series of advertisement banners on the Contest page. Each banner links to another 
site or page when the site visitor clicks it. 

1. Open the Mountain Jacques. nod site in the NetObjects Fusion 7.5\User 
Sites\Mountain Jacques folder. 

2. Display the Contest page in Page view. 




Contest 



J3w 



Win a week at Wonder Lodged 



Mountain retreat with ski-in ski-out*- 
access to cross country and downhill skiing.il 




Write in 25 words or less:]] 

"Why I love Mountain Jacques'H 

Winning statement will be selected by*. 
Mountain Jacques staff, and may appear in our advertisements f 

Type your entry and submit it to Be ies.com 



You are going to replace the page banner with the rotating ad banner, so you 
must create a new MasterB order for this page. 

3. Click in the MasterB order. 

4. Click Add/Edit on the MasterBorder Properties palette and click Add in the 
Edit MasterBorder List dialog. 

5. Name the new MasterBorder ContestBorder and base it on the 
DefaultMasterBorder. 
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Chapter 8 Adding a Rotating Ad Banner 



6. Click OK. 

Because you created a new 7. Right-click the Mountain Jacques banner, then select Delete Object from the 

MasterBorder for this page, shortcut menu . 

changing it does not affect 



other pages. 




8. From the View menu choose Toolbars>Component Tools>NetObjects Fusion 
Components. 

The NetObjects Fusion Components toolbar appears. 



Ad Banner tool 



ESS 



Ad Banner tool 



If you misplace the Ad 
Bannerjou can select 
Undo from the Edit menu 
and start over. 



9. Click the Ad Banner tool. 

10. Starting in the upper left of the top MasterBorder where the banner was, draw a 
thin horizontal rectangle. The size doesn't matter. NetObjects Fusion sizes the 
box to the image. 

NetObjects Fusion places a picture placeholder where you drag, and selects it. 
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Setting Rotating Ad Banner Properties 



I'W Ji ' , i I 2 ? 0 H9° 1°?° I°9° WJ 




The properties palette shows Rotating Ad Banner Properties. 



Setting Rotating Ad Banner Properties 

You can specify whether the ad banner is the size of the image, a standard banner 
size, or a custom image size. You can specify the pause time in seconds between 
banner transitions, and the total number of images to appear in the ad banner. 

For each image you can specify the image filename, target URL of the link, and 
transition effect. 

1. On the Component tab of the Rotating Ad Banner Properties, select the 
Image 1 property in the left column. 

The right column shows the name of the default ad banner placeholder, 
adbanner.gif . The filename appears in the Rotating Ad Banner field at the top 
of the Component tab. 

You can drag the column divider on the Component tab to change the column 
widths. 
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Chapter 8 Adding a Rotating Ad Banner 



Rotating Ad Banner Properties SJP 



Rotating Ad Bar 



JJ 



Banner Type 


Irr-sg* Size 




Automatic Resizing 


Disabled 




P^use Time (seconds) 






Number of Images 






URL tor Image 1 






Transition 1 


Column 




Image 2 


C:\NetObjec 




URL tor Image 2 







• Browse icon 



■ Automatic Resizing is disabled when 
all images are the same size 



Browse icon 



2. Click the Browse icon at the top of the Rotating Ad Banner Properties to 
display the Picture File Open dialog. 

3. On the Folder tab, navigate to the NetObjects Fusion 7.5\Tutorial\AdBanners 

folder and select Wonderl_odge.gif. 



Picture File Open 



Folder j Image Assets | 
Look in: | Q AdB, 



i aimers 



~3J o= S a EH 



Fusion7Banner.gif 
RockClimbBanner . gif 



WonderLodge.gif 



File name: | WonderLodge.gif [ Open j 

Files of type: |\Veb Images ( K .gif; K .jpg; K .jpeg; K .png) Cancel | 



Wonder Lodge,.. 



fV Show thumbnail image 



4. Click Open. 

The placeholder image changes to the WonderLodge banner, and the picture 
box resizes to accommodate it. 



5. Drag the Wonder Lodge banner to center it over the page content. 
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Setting Rotating Ad Banner Properties 



I |0 1^ I |2Q0 |390, 




Wonder Lodge... 

Only a click away! 



Win a week at Wonder Lodged 

Mountain retreat with ski-in ski-out*- 
access to cross country and downhill skiing.l} 




Write in 25 words or less:]] 

Why I love Mountain Jacques'H 



6. On the Component tab of the Rotating Ad Banner Properties, double-click 
the URL for Image 1 property. 

7. In the Link dialog that appears, set Internal Link as the Link type and double- 
click the Wonder Lodge page. 



Link t»» | Internal Link 
□ Internal links: 



3 



Find Again 



Home 
Mission 
a~0 Events 

! n Activities 

^ O Highlight; 
n Next Tour 
B n Contest 

:... n — 



C Current page 



Target: None C Existing: |_blank 



Name 
[none) 



] r New: 



Link 1 Cancel 



When a site visitor clicks the Wonder Lodge banner, the browser displays the 
Wonder Lodge page. 

8. On the Component tab, select Transition 1. 
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Chapter 8 Adding a Rotating Ad Banner 



You can drag the column 
divider in the properties 
palette to widen a column. 



To maximize compatibility 
with browsers, it is best if 
all the banners are the 
same size. 



9. In the drop-down list at the top, select the Unroll transition. 



Rotating Ad Banner Properti 



0|O| 

Rotating Ad Banner: 



Column 




JJ 


Column 
Fade 










je Size 




Rotate 
Smash 
Tear 




ibled 




Unroll 








Image 1 






URL for Image 1 


Vonder Lod 




Transition 1 


Column 




Image 2 













10. Double-click the Image 2 field in the left column of the Component tab. 

11. From the Folder tab of the Picture File Open dialog, navigate to the NetObjects 
Fusion 7.5\Tutorial\AdBanners folder, select Fusion7.5Banner.gif, then click Open. 

The Fusion Banner now appears in the banner location. 

12. On the Component tab, double-click the URL for Image 2 field. 

13. In the Link dialog that appears, select the External Link type. 

14. Select the NetObjects Home Page link: http://www.netobjects.com. 



Link WS I External Link 



T l Find... | Find Again 



New link: |hllp:f7 ^wm .netobiects.com 

* External links: 



I Conten~ 



iailto:Bob@MounlainJacques com 
.specialized.com 



rriailto:Bob@MounlainJ acques.com 



hllp: //www. specialized, com 



Target: None C Existing: 



] r Nra 



Link I Cancel 



15. Click Link. 
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Setting Rotating Ad Banner Properties 



When an online site visitor clicks this banner in the browser, the browser 
connects to the NetObjects Fusion Home page. 

16. Leave Transition 2 set to the default Column. 

17. On the properties palette, scroll down until you see the properties for Image 3. 

18. Double-click the Image 3 field. 

19. On the Folder tab of the Picture File Open dialog, navigate to the NetObjects 
Fusion 7.5\Tutorial\AdBanners folder, select RockClimbBanner.gif, then click Open. 

The Rock Climbing banner appears in the banner location. 

20. Double-click the URL for Image 3 field. 

21. Set the Link type to Internal Link and double-click the Next Tour page. 

22. On the Components tab, select Transition 3, then select the Tear transition 
from the drop-down list at the top. 



I 1° hw , J 1=9° Es° Hq° tw I°w , ,| KJ J 




Components do not display when previewing. You must publish locally or 
remotely to view components . 
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Chapter 8 Adding a Rotating Ad Banner 



0 



Publish 



Publishing Your Site 



Previewing creates a simplified version of the files and folders required for your site 
so you can view it quickly in the browser. Publishing locally creates the files and 
folders that you transfer to your Web server. 

When previewing your site, placeholders appear instead of NetObjects components. 
You must publish the site to view components . 

1 . Click the Publish button on the control bar to change to Publish view. 



■ NetObjects Fusion - Mountain Jacques. nod 




File Edit Go Publish Tools Help 


# ® ^) (<§> 
Online Site Page Style Assets Publish 


SB 0 {$ 

Preview Site Publish Settings Publish Site 



Contents of location ^Contents oF directory / 




Name | Type 


| Attributes 


I Last Remote Publish 


| Last Local Publish 


H Q assets 


| assets Folder 








'• □ html 


□ html Folder 










(CflBannerData. class Java , 


R 


Never Published 


Never Published 




|j3 Banner Transition, class Java , 


R 


Never Published 


Never Published 




[yp ColumnTransiticn. class Java , 


R 


Never Published 


Never Published 




|3-yriamicBcnner, class Java ■ 


R 


Never Published 


Never Published 




(rJlradeTransition. class Java , 


R 


Never Published 


Never Published 




.. index.html HTML, 


C 


Never Published 


Never Published 




^"lodge.jpg Image 


C 


Never Published 


Never Published 




[rjRotateTi-ansition, class Java . 


R 


Never Published 


Never Published 




[QjlSmashTransition. class Java , 


R 


Never Published 


Never Published 




[Tjl Teai-Transition. class Java , 


R 


Never Published 


Never Published 




[□pLInrollTransition. class Java , 


R 


Never Published 


Never Published 



iSite 



2. Click the Publish Site button on the control bar. 
The Publish Site dialog appears. 

3. In the Save location section, select Local Publish from the Publish files to 

drop-down list if it is not already selected. 
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Publishing Your Site 



You can click the Pencil icon 
to view the default location 
to save hies, which is 
NetObjects Fusion 7.5\User 
Sites\Mountain 
JacquesMocal Publish. 



Pages to publish 
| Entire Site 



3 



I 

I - Publish nh ^nnsH assets r 



Publish Cancel 



■ Click to see a movie 
about publishing 
your site 



4. Click Publish. 

NetObjects Fusion displays the Publishing Site dialog, showing status while 
copying files to the NetObjects Fusion 7.5\UserSites\Mountain JacquesMocal 

Publish folder. It launches the browser specified on the Preview tab of the 
Application Options dialog, and displays the Mountain Jacques Home page. 



When you publish the 
entire site, the browser 
always displays the Home 
page, unlike previewing, 
where the browser displays 
the current page. 



5. Click the Contest button to view the Contest page. 



File Edit View Favorites iools 



Address |~~ 



■JetObjetrs Fusbn 7.S \Llser SitesVMourtoh JscqueALocal PublisMhtmlScoritestht 



der Lodge.. 

Only a dick away! 



Win a week at Wonder Lodge! 

Mountain retreat with ski-in ski-out 
access to cross country and downhill skiing. 




Write in 25 words or less: 
"Why I love Mountain Jacques" 



Winning state merit will be selected by 
Mountain Jacques staff, and may appear in our advertisements. 



Type your entry and submit itta Bab^ivl^uPitaihJafiquSBi.eaarn . 

.' our] [Contest] [Wonder Lodge] 



I 



~3 11 
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Chapter 8 Adding a Rotating Ad Banner 



The browser starts the Java applet required to display the rotating banner, and 
the banner changes every 3 seconds as specified in the Rotating Ad Banner 
Properties. 

Note the transition effects you assigned between each banner. 

6. Click the Rock climb with us! banner to view its link target, the Next Tour 
page. 

7. Click the Back button in the browser to return to the Contest page, or click the 
Contest button on the button navigation bar. 

8. Click the Wonder Lodge banner to view the Wonder Lodge page. 

■v- If you are not online and click a remote link such as the NetObjects Fusion 
banner, the browser displays a message telling you it cannot connect or 
cannot display the page. 

If you are online and click a remote link, the browser connects to the page 
specified as the link target. 

Where To Go From Here 

You just implemented a Web application using a NetObjects Fusion component in 
your site. For more information about NetObjects Fusion components, see Chapter 
25, "Using NetObjects Fusion Components" in the NetObjects Fusion 7.5 User 
Guide. 

The next lesson, Chapter 9, "Creating a Table," shows you how to create a table and 
add text and links to it. 
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CHAPTER 9 



Creating a Table 

A table of scheduled events will keep visitors informed about Mountain Jacques' 
upcoming activities. With NetObjects Fusion you can set up a table containing 
events and dates, and link to pages containing other information. 

To follow the steps in this lesson you must have built the Mountain Jacques site in 
Chapter 1, "Building a Site in 10 Minutes." 

This chapter shows you how to: 

♦ Create a table 

♦ Format the table 

♦ Add text to the table 

♦ Add links to the text 
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Creating a Table 



Table tool 



Creating a Table 



You are going to create a table that is 5 rows by 2 columns, and place information 
about upcoming tours in it. 

1. Open the Mountain Jacques.nod site in the NetObjects Fusion 7.5\User 
Sites\Mountain Jacques folder. 

2. Display the Events page in Page view. 



hw J 1=9° Em , , 



, KJ J 




Events 



[I ; . f _/ Mi I ! ihts! [ i ; y i : ■ ■ . 1 



3. Select the Table tool from the Container flyout of the Standard toolbar and draw 
a wide rectangle in the Layout. 

The Create Table dialog appears . 

4. In the Number of columns field, leave the default 2. 

5. In the Number of rows field, enter 5, then click OK. 

The table appears selected in the Layout. With the table selected, you can: 

♦ drag a handle to resize the table. 

♦ click the table border to select the table. 

♦ drag the table border to move the table. 
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Selected table 



You can drag a handle . 
to resize the table 



I'W , J .11 , 




W Iw 1, IM I. 



Events 



Adding Text to the Table 

1. Double-click in the first cell in the first row and type Events. 



Cell selected for text editing 




I 2 ? 0 I 3 V° HV° I 6 ? 0 7fl 1 



Events 



When the cell is selected, the properties palette shows Cell Properties. 

2. Press the Tab key to select the next cell in the row, then type Dates. 




3ijij, |qqo |SQQ lego, 



3. Click outside the table to deselect the cell, then click the table border, or a 
column or row divider, once to select the table. 
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Adding Text to the Table 



4. Place the pointer on the left table border next to Row 1 , until it changes into a 
solid one-sided arrow pointing at the row. 

5. Click once to select the row, so each cell in the row is outlined by a solid black 
border. 

6. On the Cell Properties palette, click the Cell tab. 

7. On the Cell tab, select Cell is header. 

This centers the text and changes all the text to bold. 

8. To left justify the text, choose Left as the Horizontal alignment. 



1° h°°, |, , A I 200 I 300 Nj? 1^°, , ij , , , I" 



Cell tab 




9. Double-click the first cell in the second row. 

10. Type Rock Climbing 

11. Press the Tab key to select the cell next to it and type June 9-16. 

12. In the same way, fill in the complete table as follows: 



Events 


Dates 


Rock Climbing 


June 9-16 


Kayak Mountain Lakes 


August 20-27 


Mountain Bike Tour 


October 6-1 3 


Skiing and Snowboarding 


December 21-31 



13. Click outside the table to deselect the cells. 
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Events 




|Events 


Dates 


[Rock Climbing 


June 9-16 


Kayak Mountain Lakes 


(August 20-27 


Mountain Bike Tour 


October 6-13 


|Skiing and Snowboarcling 


December 21-31 



14. Click the table border once to select the table. 

On the General tab of the Table Properties palette set the following values: 

♦ Set the Table border field to 8. 

This enlarges the outer edge of the table. 

♦ Set the Cell padding field to 4. 

This adds space between the text and the border of each cell. 

♦ Set the Cell spacing field to 5. 
This adds space between cells. 

15. Drag the table border to center the table near the top of the Layout. 



i 11 , , , EjQ, 



I^°i3, , 
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Adding Links to the Table 



1. Double-click the Rock Climbing cell to select the text for editing. 

2. Drag through the Rock Climbing text to select it, then click the Link button on 
the Cell Properties Format tab. 

3. Create an Internal Link to the Next Tour page. 



^3 



Link b*« | Internal Link 
□ Internal links: 



Home 
n Mission 
- n Events 

! n Activities 

j Q Highlig hts 

i n nHMHH 

B O Contest 

1 ^ Wonder Lodge 



C Current page 



3 



Find Again 



Name 
(none) 



Target: None C Existing: | 



] r New: 



Link I Cancel 



4. In the same way, select the Mountain Bike Tour text and link it to the 
Highlights page. 



J i°. 



, hw , j pp, 



I 




Events 



X Tlbii! 



a |4qo |5go, , 



June 9-16 



August 20-27 



October 6- 13 



y/ §ii(mg1iu^uo^ 21-3 



. . . I'U J 




5. From the Object menu, select Size Layout to Objects. 
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The Layout automatically adjusts to the smallest possible size while still 
allowing enough space for all the objects in the Layout and the MasterBorder. 



H°.... 




, | |3°°, , 



, J°'J 



Events 





| Events 


Dates 


RockClimbinq 


June 9-16 


Kayak Mountain Lakes 


August 20-27 


Mountain Sike Tour 


October 6-13 


| Skiing and Snowboarding 


December 21-31 



Preview Site 



6. Click the Preview Site button on the control bar to preview the entire site and 
test the links in your table. 



^] Events - Microsoft Internet Explorer 



File Edit View Favorites Tools Help 



Addrsis j C:\NetObjeci.i Fusicn 7.5 \Usei Si(e*SMoun(tiin Jacqut -i i \ i ( 



${>a 1 1 Links | 






Events 


Rock Climbino 


June 9-16 




Kayak Mountain Lakes 


August 20-27 


Mountain Bike Tour 


October 6- 13 


Skiing and Snowboarding 


December 21-31 



j | |! M_j I- i | | '_b | |"' iinhi jl j [ ] 



| ^) Computer 
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Where To Go From Here 

You just used NetObjects Fusion's table features to develop tabular information 
with hypertext links for publishing to the Web. 

For more information on tables, see Chapter 15, "Adding Tables" in the NetObjects 
Fusion 7.5 User Guide. 

The next lesson, Chapter 10, "Creating an E-Commerce Catalog," shows you how 
to use the catalog tool to build an online store. 
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CHAPTER 10 



Creating an E-Commerce 
Catalog 

In this chapter, you build an e-commerce catalog that includes products which will 
assist hikers on expeditions. Using the NetObjects Fusion E-Commerce Catalog 
tool, you can create an online store with products and descriptions that will match 
the style of your site. 

To follow the steps in this lesson, you must have created the Mountain Jacques site 
described in Chapter 1, "Building a Site in 10 Minutes." 

This chapter shows you how to: 

♦ Create a catalog 

♦ Add products 

♦ Add options 

♦ Format the list page 

♦ Format the detail pages 
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Adding Pages for the E-Commerce Catalog 

Each catalog includes two types of pages: a list page, which displays all catalog 
items with a thumbnail image and summary of each product, and detail pages, 
which display one product to a page. You add the list page and NetObjects Fusion 
automatically adds the detail pages for you. 

1. Open the Mountain Jacques. nod site in the NetObjects Fusion 7.5\User 
Sites\Mountain Jacques folder. 

2. Go to Site view. 

3. Select the Home page and add a new page. 

4. Name the new page Hiking Products. 

5. Change the MasterB order to DefaultMasterBorder. 

6. Display the Hiking Products page in Page view. 



I 1° j IM j 





Tile I [Mission! [bvenTS'i I'Nevt Tour! ji ; : : : : ! 



I 7. Select the Catalog tool from the Advanced toolbar and click in the upper left 

I corner of the Layout area. 

Catalog tool ^ ^ g 00C j j^ea to start in the upper left corner of the Layout to allow as much 

room as possible for the products. You can adjust the position later, if necessary. 
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If catalogs are already 
associated with the site, 
you may see a larger dialog 
If this happens, use the 
Create anew E-Commerce 
Catalog option. 



8. In the Add E-Commerce Catalog dialog, type Products as the name of the 

catalog and choose Use catalog without a store engine as your store. 



Add E-Commerce Catalog 



Please Name and Add (in drop-down menu) a store for 
your E-Commerce Catalog. You may also explore the 
catalog without a store. This information will be used 
to save the catalog so you can reuse it at a later time. 

Name: | Products 

Store: | [Use catalog without a store engine] 31 
OK | Cancel | 



9. Click OK. 



Before you begin to add 
products, it's a good idea to 
organize the pictures you 
want to include into a 
single folder so you can find 
them easily. 



Adding Products 



After you add the catalog component, the next step is to add products. You should 
be looking at the Products tab of the E-commerce Catalog Properties Editor. 



E -Commerce Catalog Properties Editor 



Products 



List Page 



Detail Page 



1 Displ... 

El 


Name SKU Price 





















































Duplicate 



Remove | 



IB 



Filter | 



how All | 



SKUVPart Number: 



Weight: 



Sale Price: 

r|5o 

Retail Price: (for display only) 




[Let Store Engine Define Values] 
Shipping Cost: 



[Let Store Engine Define Values] 



Add Option... | 



Edit Option... | 



1. Click on the Attributes tab if necessary. 
♦ In the Name field, type in Fleece Jacket. 
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Adding Products 



♦ In the SKU/Part Number field, type in MJ_01 

♦ In the Price field, type in 59.99. 



Attributes | Description 


n 


Detail Image 


Thumbnail Image j Related Products j 


Name: 






^rice: 


Sale Price: 




(Fleece Jacket 






53. S3 


r |o.o 




SKU/Part Number: 








Retail Price: (for display only) 


|MJ_01 












Manufacturer: 






Ilptions: 






| None 










Add Option... | 


Sales Tan: 












| [Let Store Engine Define Values] 










Remove j 


Shipping Cost: 












| [Let Store Engine Define Values] 










Edit Option... | 



You can add product attributes such as size and color. 

2. Click Add Option... 

3. In the Group Name field, type Color. 



You assign different options to a group. Please provide a 
group name and a label. When you click OK you can then 
assign options to this group. 

Group Name: 
| Color 
Label: 
| Color 



Add Another | [ OK | Cancel | 

4. Click OK. 



The Edit Product Options dialog will appear. This is where you add specific 
attributes . 
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Of 

I 



HI 



Create Mew Group.. 



Duplicate Group | 



New Option... | Remove | 
r SortAlphabelically 



Value: 



□ K | Cancel 

5. Click on New Option and type in Green. 

6. Click Add Another and type in Blue. 

7. Click OK to close the Edit Product Options dialog. 

8. Click OK to close the Add Option dialog. 

You can enter product descriptions to give your customers complete product 
information. 

9. Click on the Description tab. 

10. Enter the following text: 

a. For Brief Description, type Take the bite out of wind! 

b. For Extended Description, type Wear Mountain Jacques Designs Fleece Jacket 
alone or as a mid-layer to stay warm and cozy. 



Attributes Description | Detail Image j Thumbnail Image j Related Products | 

Brief Description: Product Comments: Keywords: 



T ake the bite out oi wind! 



Extended Description: 




Wear Mountain Jacques Designs fleece jacket alone or as a mid-layer to stay warm and cozy. 



You enter product images on the Detail Image tab. This image appears as the 
thumbnail image on the List page. 
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Adding Products 



For more information about 
these output settings, see 
Chapter 20,"Creating 
Catalogs, "in the NetObjects 
Fusion 7.5 User Guide. 



11. Click on the Detail Image tab. 

12. Click Browse to navigate to the NetObjects Fusion 7.5\tutorial\Catalog folder 

13. Select fleece.jpg. 



Attributes | Description 
Preview: (scaled to 65% to fit) 




Detail Image | Thumbnail Image j Related Products j 
Image Path: 

| C:\NetObjects Fusion 7.5\Tutorial\Catalog\fleece.jc Browse.. 




Output Settings: | User Settings 
File type 
Quality: 



I JPEG T] 
I Maximum - | |100 ^Tj Percent 



Approximate download time: 
File Size:17 KB 




14. Click Open. 

You use the Output Settings on the Detail Image and Thumbnail Image tabs to 
balance display quality and download time so your site visitors are not waiting a 
long time for your photos to appear. For this lesson, the default settings are fine. 

You can enter additional products by repeating steps 1 to 13. 

15. Click on the Products tab. 

16. Click Add. 



The next line in the products list will be highlighted. 
17. Enter the Product 2 information listed below on the Attributes tab. 





Product 2 


Product 3 


Product 4 


ATTRIBUTE TAB 








Name 


Compass 


z amilyTent 


Backpack 


SKU/Part Number 


MJ_02 


MJ_03 


MJ_04 


Price 


9.95 


199.00 


59.99 


Add Option 


Size 


Color 


Color 


Add Option Value 


Small, Large 


Green, Blue 


Green, Blue 


DESCRIPTION TAB 


Brief Description 


Great for beginners! 


Our most popular tent! 


The perfect backpack! 
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Product 2 


Product 3 


Product 4 


ATTRIBUTE TAB 








Extended Description 


The large numbers 
make this easy to read 
compass great for 
children and adults. 


This family size tent 
offers over 20 square 
feet of space and 
endures all types of 
weather. 


With curved shoulder 
straps, this backpack is 
great for daytime hikes 
or late night 
expeditions. 


DETAIL IMAGE TAB 


Add image 


compass.jpg 


tent.jpg 


backpack.jpg 



18. Click Add and repeat the process for Product 3 and Product 4. 
Next you set up formats for the List page and the detail pages. 



Formatting the List Page 

The list page shows a small preview of each product in the catalog. Site visitors 
click a thumbnail to go to the detail page. 

1 . Click the List Page tab . 



E -Commerce Catalog Properties Editor 



Products 

Orde r | 

1 Fleet 



List Page 



Detail Page 




2 


Compass 


MJ 02 


3.35 


3 


Family Tent 


MJ 03 


133.00 


4 


Backpack 


MJ 04 


53.33 



















































Display Items 



Product Items: 



Extended Description 
Keywords 
Manufacturer 
Retail Price 
Sale Price 
Sales Tan 
Shipping Cost 
SKLVPart Number 
Weight 
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2. On the Layout tab, select a layout. 

3. Click the Display Items tab. 

4. Highlight Name and click Format. 
The Format Name dialog appears. 

The label formats you select here apply to the List page only. 

a. Delete the text Name and enter Item as the label name. 

b. Click Format Label. 

The Object Format dialog appears. 



Format Name 



f Links to detail page 
Label 



El 



Format Text 




The text formats you select here for the labels apply to the List page only. 

<v- On the Character tab, set Font to Arial, Style to Bold, and Size to 0, 
then click OK to return to the Format Name dialog. 

5. Repeat Step 4 for the remaining Product Items to Display. 

The label names should be Price, Description and Options.Price. 

6. Click OK. 

7. Click Done to see the List page. 
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The thumbnails are bounded by a green border. You can change size of the 
images within the green border, but you cannot edit product information or 
change dimensions within the border. 

8. Drag the catalog so it is centered under the page banner. 
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, h,°° j , , , , iqpp i 3 w hpp, 



, |spp. 



i^_P_l 

r 



Hiking Products 



Hiking Products 



L 



□ 



fleece 



Price IS59.99 



Description [Take the bite out of wind! 



Size: | Small 



Item Compass" 
Price $9.95 



Description iGreatfor feeamnersi"" 



4^ 



Item Family Tent~ 



Price m 99.00 



DuVMI|-llUII y.-'J ■ ■■■■ .1 . .11 |.. lil' 



I 



Item Backpack" 
Price $59.99 



DumjiiiIiuii ITli' I . I . i I 1 



Color: I Greer jj 



9. In the Properties Palette, make Overall Width 450, Vertical Space between items 
15 and horizontal space between items 15. 

10. Click Apply. 

11. On the Catalog Properties Palette, click the Configure button to return to the 
E-Commerce Catalog Properties Editor. 



Formatting the Detail Pages 

Each detail page can contain an image and specific information about a product 
such as price and part number. The layout and text formats you select on the 
DetailPage tab are reflected on all detail pages . Changes you make directly on a 
detail page apply only to that page. 

1 . Click the Detail Page tab. 
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E -Commerce Catalog Properties Editor 



Products 
Detail Page Layout: 



List Page 



Detail Page 



Detail Page Display Items: 
Product Items: 



Sale Price 
Sales Tan 
Shipping Cost 
SKLVPart Number 
Weight 



Product Items to Display: 




Add> 
Add All » | 
— < Remove | 
:< Remove All | 




Move Up | 




When selecting a layout, 
consider the shape of your 
photos and the amount of 
text you want to include in 
the caption. 



2. Select a Layout. 

The pictures in this guide use the default layout, but you can experiment with 
other layouts . 

The layout you select applies to all detail pages. 

3. Under Product Items to Display, highlight Name and click Format. 
The Format Name dialog appears. 

The label formats you select here apply to all detail pages. 

a. Delete the text Name and enter Item as the label name. 

b. Click Format Label. 

The Object Format dialog appears. 
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Formatting the Detail Pages 



The text format should 
match or compliment the 
SiteStyie. 



_?J2<] 



Character | Paragraph | Border; | Background | 



Trebuchet MS 
Jw Cen MT 

Jv-i Cen MT Condensed 

Tw Cen MT Condensed Extra B : 



■ r 3 1 I in 

Italic 
Bold 

Bold Italic 



TT3 



Color: | Automatic ^ | Position: (Automatic ^] 

Letter case: (Automatic Decora 
Small caps; [Automatic T | 



[^Automatic 

□ Underline 

□ Overling 

□ Strikethrough 



The quick brown fox jumps over the lazy dog, 



This preview might not show the format you'll see on your paoe because the Sex! might be 
influenced by en additional style Tc learn about (he scooe of style;, please see Hero. 



OK I Cancel 



The text formats you select here for the labels apply to all detail pages. 



Select a template that is 
coordinated to your 
SiteStyie. 



For more information about 
saving profiles, see Chapter 
20 "Creating Catalogs, "in 
the NetObjects Fusion 7.5 
User Guide. 



<!■ On the Character tab, set Font to Arial, Style to Bold, and Size to 0, 
then click OK to return to the Format Name dialog. 

4. Repeat Step 4 for the remaining Product Items to Display. 

The label names should be Price, Description, and Options. 

5. Click OK. 

6. Click Done to close the E-Commerce Catalog Properties Editor. 

You use the Save Profile option at the bottom of the E-Commerce Catalog 

Properties Editor to save the settings associated with a specific catalog so it 
can be used for the next catalog created. For this lesson, we will not create a 
profile. 

Look at the Site Navigation palette. NetObjects Fusion added a page named 
Hiking Products to the site. The new page icon shows multiple pages and has 
the same name as the catalog. This icon represents the detail pages. The actual 
number of pages adjusts to accommodate as many or as few products as you add 
to the catalog. 
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1^1-1*1 



Q Home 

^ Mission 

Events 
S- -^ Activities 
Hiking 

; n Yosernite 

O Highlights 
Next Tour 
^ Contest 

n Wonder Lodge 
- 0 Hiking Products 



List page 
Detail pages 



Detail page icon 



7. Double-click the detail page icon on the Site Navigation palette. 
The first detail page appears. 

You use the navigation buttons on the control bar to move to the next and 
previous detail pages, and to add or delete a page. The three navigation buttons 
below the banner provide a way for site visitors to move to the next or previous 
product, or back to the thumbnail page. 

8. Click the Next and Previous buttons to display each product page. 

File Edit View Go Object Text Tods Helo 



Use these buttons in 
Page view to navigate 
through the photo 
pages and add or delete 



When you publish your 
site, visitors use these 
buttons to navigate 
between photo pages 
and back to the 
thumbnail page 



Products 



Fleece Jacket 




/Vear Mountain Jacques 
Designs fleece jacket alone 
jr as a mid-layerto stay 
^arm and cozy. 



I t. I I • • ■ ■ i | . -| i I. i i. | - ■ .r I I i - . | - | 
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Formatting the Detail Pages 



9. Press Shift and click the catalog and each navigation button to select all of these 
objects. 

10. Press the right arrow key to move the selected objects so they are centered under 
the banner. 



, , hw , j law 



|3yQ 1^0 |5QQ, 



, , , I 7 ? 0 , ,J 





Products 



m m 



Item r - .i v 

Price $59.99 



/Vear Mountain Jacques Designs 
Description r leece Jacket alone or as a mid-layer 
:o stay warm and cozy. 



[Home! [Mission! [Events! [NextTourl [Contest] [Hiking Productsl [Productsl 



This centers the objects on all photo pages . 

11. Click the Next button on the control bar to move to the Compass detail page. 

12. Preview the site. 



Next 
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3 Products - Microsoft Internet Explorer 



File Edit View Favorites Tools Help 

O Back - Ql - [jjj I P 5earch Favorites *jp Media ■© t : j- 0 - l~7 $ ^ 



C: iNstObjeci:-:, Fusion 7.5\User Sit e?\ Mounts in ja.:que5y"i'sviewip:-oducl:5.fi.hfml 




13. Click the up arrow to return to the List page and then click an image to go to the 
detail page. Use the left and right arrows to move between detail pages. 

Your catalog is complete. 

Where To Go From Here 

You just learned how to put your products on the Web using the NetObjects Fusion 
Catalog tool. For more information about catalogs, see Chapter 20, "Creating 
Catalogs" in the NetObjects Fusion 7.5 User Guide and in the NetObjects Fusion 
online Help system. 

The next lesson, Chapter 1 1 , "Layering Objects," shows you how to use the Fixed 
Page Layout publishing option to lay out and publish a page containing overlapping 
objects. 
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Layering Objects 

You want to show highlights of the last mountain bike tour on the Highlights page. 
You can take advantage of NetObjects Fusion's support of layered or overlapping 
objects to arrange images on the page. 

To view overlapping objects properly, your site visitors must use Microsoft Internet 
Explorer 4.0 and above or Netscape Navigator 4.x. In NetObjects Fusion you can 
choose from three HTML output options to support various browsers. You can 
assign one publishing method to the whole site, and then select a different method 
for individual pages, or regions of pages. For pages or regions that contain 
overlapping objects, you must use the Fixed Page Layout HTML output option, so 
browsers that support this feature can properly display your page. 

To follow the steps in this lesson you must have built the Mountain Jacques site in 
Chapter 1, "Building a Site in 10 Minutes." 

This chapter shows you how to: 

♦ Add and manage overlapping objects 

♦ Set the HTML output option 

♦ Edit text on the banner 
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Adding Overlapping Objects 



1. Open the Mountain Jacques site and display the Highlights page in Page view. 



I |0 | |2(J0 |3(J0 \5<f0 ^O, 



Highlights 





j 



Picture tool 



2. Select the Picture tool and click the Layout label in the upper left corner of the 
Layout. 

The Picture File Open dialog appears, showing the Folder tab. 

3. Navigate to the NetObjects Fusion 7.5\Tutorial folder, select twobikers.jpg, then click 
Open. 



I l° hw , j Em 



l^o, |6QQ, lego, |7i; 




164 



Chapter 1 1 Layering Objects 



4. Select the Picture tool again. 

5. Click the lower right corner of the twobikers picture. 

6. In the Picture File Open dialog, navigate to the NetObjects Fusion 7.5\Tutorial 

folder, select mtnbiker.jpg, then click Open. 



u j 



Overlapping object icon 




To view object icons, choose 
Object Icons from the View 
menu. 



A red exclamation point warning icon appears on both pictures to show the 
objects are overlapping. Move the mouse pointer over this icon to see the 
ScreenTip explaining it. 

7. Select the Picture tool once more and draw a rectangle starting on top of the 
lower left corner of the mtnbiker picture, dragging downward and toward the 
left side of the Layout. 

8. In the Picture File Open dialog, navigate to the NetObjects Fusion 7.5\Tutorial 

folder, select girlbiker.jpg, then click Open. 
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Adding Overlapping Objects 




The red exclamation point icon also appears on the girlbiker picture to show it 
is overlapping, or overlapped by, another object. 

9. With the girlbiker picture selected, from the Object menu select Arrange 
Objects, Send to Back. 

10. Select the twobikers picture and from the Object menu select Arrange 
Objects, Bring to Front. 




KJ J 



This rearranges the overlaps to expose more detail and cover more plain areas. 
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Setting the HTML Output Option 

1 . Click the Layout so the Layout Properties palette appears . 

2. On the General tab, in the HTML output section, select Fixed Page Layout 

from the drop-down list to ensure the browser correctly displays overlapping 
objects. 



Layout Properties 



h ]b|o| 



Layout name: (HighlightsLayout 
Layout Page 
Width: [sirj [730 Pixels 

Height: [Til [643 Pixels 

r- HTML output 



Site Setting 



Site Setting 

Dynamic Page Layout - All browsers 
Regular Tables - All browsers 



Fii-.z-d Page Lajioui 



I Center in browser 
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Editing the Banner Text 

Put a more descriptive title on the banner. 

1. Select the banner so the Banner Properties palette appears. 

2. In the Banner field, change the text to read: 

Mountain Biking <Enter> 
AnnualTour Highlights 

As you type, the text on the banner changes. 



I 1° hw , J 1=9° Es° Hq° tw tw KJ J 
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Previewing Your Site 

For portions of sites that use the Fixed Page Layout HTML output option for 
layered objects, you must preview the site using Microsoft Internet Explorer 4.0 or 
greater or Netscape Navigator 4.x, because other versions of browsers do not 
support this feature. 

Z) Preview your site. 



You can select the browser 
for previewing on the 
Preview tab of the 
Application Options dialog 
in the Tools menu. 




Where To Go From Here 

You've seen how to use NetObjects Fusion's HTML output options to successfully 
satisfy site visitors with different browser versions. 

Chapter 12, "Supporting Target Browsers" shows you how to use cascading style 
sheet text formatting to enhance your site. 
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Supporting Target Browsers 

HTML code displays many types of text formatting and is compatible with all 
browsers. CSS is a method of coding more complex formatting such as paragraph 
borders, backgrounds, indents, and margins, but not all browsers can display these 
formats. With NetObjects Fusion you can take advantage of some of the text 
formatting features in the cascading style sheets (CSS) standard supported by 
browser versions 4.0 and above. 

Because some site visitors use browsers that support CSS and others do not, it's a 
good idea to experiment to discover how to best use cascading style sheets without 
creating problems when older browsers display the pages. Even the 4.0 and above 
browsers support CSS differently, so you must test each CSS feature you intend to 
use with each target browser you want to support. Then you can decide whether the 
site should use HTML formatting and support the broadest range of browsers 
including the oldest versions, or implement the more powerful cascading style sheet 
formatting and support only the newer browser versions. 

To follow the steps in this lesson you must have built the Mountain Jacques site in 
Chapter 1, "Building a Site in 10 Minutes." 

This chapter shows you how to: 

♦ Import a formatted document 

♦ Clear the imported formats 

♦ Assign SiteStyle text styles to the document text 

♦ Add CSS text formatting to the page 

♦ Set the target browser, HTML generation, and text format options 
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Importing a Formatted Document 

1. Open the Mountain Jacques site and display the Activities page in Page view. 



M°. . . 



, I |3;o, , 




j 



Activities 




a |@|o| 

*«-. i= 



Heislll: j333 ■ ^ : E5E Pixels 



| Sic* Se-rcing 

Tables: >» Columns Rows Sliow 



I Lagout Isa form Bel 



9 r . ni ,- I [Homel [Missionl [Eventsl [Activities! rHighlightsl fNextTourl fContestl 

FUSION 



Activities.doc is a Microsoft 
Word 2000 document.You 
must have Word 2000 or 
later installed to import this 
document. 



To view paragraph marks, 
turn on Show Text Invisibles 
on the Text menu. 



2. From the File menu, choose Import>Document. 

3. In the Import Document dialog, navigate to the NetObjects Fusion 7.5\Tutorial 

folder, select Activities.doc, and click Open. 

The text from the Activities.doc file appears in a text box in the Layout. 

NetObjects Fusion retains the formatting of imported documents, so the 
imported text appears with its previously set font and size. 

4. Click once inside the text box to select it. 
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The first paragraph is 
partially hidden by the 
Layout label. Turn Page 
Labels off on the View 
menu to reveal the text. 




Activities 



|. ■ 

]oiiie with us to Mt. "Washington, El Capitan, Mt. Hamier, or Mt. "Whitney. Mountain 

■ ; . ;. ; usure ' : ■ ' ■ ■-<- ■ > ■■ J ■■■■■ ?e 
i these incredible sites.^j 

lver Rafting & Kayaking^] 

ether you're looking for a one-day raft trip, dawn the American River or a one-week 
amping and rafting trip down the Colorado, Mountain Jacques is the place for you. 
ountain Jacques provides skilled guides and plenty of excitement for both beginners and 
■; 11 a' r tke: ; 

Skiing & SnowboardingH 

oin Mountain Jacques expert guides fisff fafesteus sn&wriding trips to the United States, 
Canada, Europe, Australia, and South America. Pick up your skis and snowboards and 
:ome withuslTl 

■/}.<. uiiiatii Btl' ■ ■ 

: . ... . ............ ■: . . . .■ ■ . .. . . .... . , . .. ; ..... . . . , . ; . ... .... .. ...... .. ■■ 

■ ,i - ' : M. - i l'i i -.- i. ■ T 
JikingTl 

prom Acadia National Park to me Sierra Nevada,. Echo: Canyon to the Pocky Mountains, 
>ur excursions range from easy day hikes to one-week adventures "that test your endurance. ^ 



:.: : '. "■ . i . :..:. s the least tin ..:.. wmn . . . . ss iih : :q ~-M - ■ mi: 



The wide border indicates the text box is selected, and the Text Box tab shows 
on the Text Properties palette. Size Layout to Text is the default setting for 
imported documents and is selected on the Text Box tab. 

5. Because it is easier to see the results of the following steps when this option is 
not selected, clear the Size Layout to Text check box. 
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When the text box is 
selected and resizable, solid 
handles surround it, and 
the Text Box tab shows on 
the Text Properties palette. 



®-f<H- 

Background- 



Uolor: Automatic 



Image: p 



| Lock height 

|~~ Size Layout to Tent - 



I™" Contents wrap to browser width 
] Tent bon is a form 



-Text Box tab 



- Size Layout to Text 



Clearing Imported Formats 



1 . Double-click inside the text box so hollow square handles surround it and the 
Format tab shows on the Text Properties palette. 

2. From the Edit menu, choose Select All, or press Ctrl+A. 
All text in the text box is selected. 

3. On the Format tab of the Text Properties palette, click the Clear button. 

The Clear button removes all formatting in the imported document. With the 
imported formats removed, NetObjects Fusion can display the text as specified 
by the current SiteStyle. 

The text changes to Arial, as specified on the Text tab for the Mountain 
SiteStyle in Style view. 
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Assigning a Standard Text Style 

1. Double-click inside the first paragraph of text, "Rock Climbing," to place the 
insertion point. 

The Format tab shows on the Text Properties palette. 

2. From the Style drop-down list, select Heading 1 (HI). 

The font changes to bold, size +3, as specified for the Heading 1 element on the 
Text tab of the Mountain SiteStyle in Style view. 



Double-dick and place 
the insertion point inside 
the first paragraph 



Format tab 



Select Heading 1 (HI) from 
the Style drop-down list 




,J"J 



Activities 



Rock Climbingffl 



Come with us to Mt. Washington, El Capita 
Mountain Jacques provides B&oert guide! 
(memorable climbing adventure in these inc 



A|m|o| 



River Rafting & Kayaking^ 



F 3 



Whether you' re looking for a one-day raft tri 
lone-week camping and rafting trip clown thf 
place for vou. Mountain Jacoues provides ; 



for both beginners and experienced rafters 
[Skiing & SnowboardingH 



"I'M ^Mi 

Style: Cuaont.gtiliSi 

■ | Heading 1 [HI] _-J |<none> 



the 

Tient 



pom Mountain Jacques expeit guides for fabulous snowriding trips to the United 
rotates, Canada, Europe, Australia, and South America, Pick up your skis and 



Note: You can view the font and size setting for SiteStyle text by selecting the Body 
element on the Text tab in Style view. Unless you change it, the other 
elements derive their format from the Body element. 

3. Set the remaining headings to the Heading 1 (HI) style. 
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5 



River Rafting & Kayaking^ 

Whether you're looking for a one-day raft trip down the American River or a 
ane-week camping and rafting trip down the Colorado, Mountain Jacques is the j 
alace for you. Mountain Jacques provides skilled guides and plenty of excitement j 
: or both beginners and experienced rafters and kayakers.^ 

Skiing & Snowboardinglf 

Join Mountain Jacques expert guides fur fabulous snownding trips to the United [ 
States, Canada, Europe, Australia, and South America. Pick up your skis and ^ 
snowboards and come with uslf i ' 

Mountain BikingU 

Bike down the ski slopes in summer and pedal wilderness trails anytime on our 
Mountain Jacques guided bike excursions.!! 

HikingH 

Prom Acadia National Park to the Sierra Nevada, Echo Canyon to the Pocky 
Mountains, our excursions range from easy day hikes to one-week adventures 
that test your endurance q] 



Camping^ 



Fhe most beautiful sites are the least known. Mountain Jacques has the 
ec jiTient = : cic ereat i fc 

[Homel [Missionl [Events! [Activities! [Highliohtsl [NeaTourl [Contest! 



Checking the Browser and HTML Output Settings 

The Activities page is a standard HTML page that displays properly with the 
default HTML output settings. To view all the target browser and output options 
you must open the Current Site Options dialog. 

1. From the Tools menu, select Options>Current Site. 
The Current Site Options dialog appears. 

2. In the Defaults section, Browser compatibility is set to Dynamic Page 
Layout - All browsers. 



176 



Chapter 12 Supporting Target Browsers 



General | META tags | History | Backup | 



MySite 

Phoenix ■ Teal_Gray 



Site name: 
SileStyle: 
Number of pages: 8 

-Defaults 

Browser compatibility: 

(Dynamic Page Layout - All browsers Change... 



Height: [555 
Character set: 



Width: |730 



Western European [ISQ-S 



~3 



Zniidtliriy- 
_.ML 



Cascading Style Sheets (CSS] 



LJuute type: Curly Quotes 
HTML Options... 



~3 

Variable Options 



Click the Change button to 
view output settings 



Text formatting is set to HTML 



Note that Text formatting is set to HTML. 

3. Click the Change button. 

The Browser Compatibility dialog appears , showing the default settings for 
Browser compatibility and HTML generation. 



Browser Compatibility 



Browser compatibility 

W Netscape Navigator 4.H 

5 Microsoft Internet Explorer 4.0 and above 

- HTML generation — 



]j<J 



* Dynamic Page Layout 

Uses complex hidden tables to achieve the highest level mi 
accuracy and better performance. 

C Regular Tables 

Uses a hidden table to achieve e high level of layout 
accuracy Though performance is not as good as Dynamic 
Page Layout, it avoids occasional problems with Netscape 
Navigator. 

C Fixed Page Layout 

Uss; Cascading Style Sheet Positioning and IE-specific tags lor 
Microsoft Internet Explorer 4.0 and above to create the highest 
level of accuracy; uses HTML and Netscape-specific tags for 
Netscape Navigator 4.x. 

When you select both 4.0 browser opfons, both HTML output 
options are applied. 




HTML generation is set to 
provide the best output for 
the most cases 



4. Ensure that your settings match the picture. Click OK twice to exit both dialogs. 
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Adding Cascading Style Sheet Features 



5. In Page view, click the Page Preview tab. 



File Edit View Go Object Text Tools Help 



ft |n « n 9 m ® ® 

,= Site Page Stvle Arrets Publish ' New Page Preuiew Site Publish Sits 

Page Design j HTML Source ] Page Preview 




Activities 



Rock Climbing — 

Come with us to Mt. Washington, El Capitan, Mt. Rainier, or Mt. Whitney. 
Mountain Jacgu.es grovides exgert guides to ensure you have a safe and 
memorable climbing adventure in these incredible sites. 

River Rafting & Kayaking 

Whether you' re looking for a one-day raft trig down the American River or a one- 
week camping and rafting trip down the Colorado, Mountain Jacques is the pise 
for you. Mountain Jacgues grovides skilled guides and plenty of excitement for 
both beginners and experienced rafters and kayakers. 

Skiing & Snowboarding 

Join Mountain Jacques expert guides for fabulous snowriding trips to the United 
States, Canada, Europe, Australia, and South America. Pick up your skis and 
snowboards and come with usl 



Mountain Biking 



Bike down thy ski slopes in summer and pedal wilderness trails anytime en our 
Mountain Jacques guided bike excursions. 



The Activities page displays showing the text and headings as specified in the 
Mountain SiteStyle. 



6. Click the Page Design tab. 



Adding Cascading Style Sheet Features 



Use the Paragraph Settings 
dialog to access more 
formats, and to apply 
formats to a whole 
paragraph instead of 
selected text or the text box. 



You might want to use the CSS features as you would use conditional text in a word 
processing program. You know that site visitors with browsers that support CSS can 
view the CSS formats, but site visitors with older browsers see only the HTML 
version. In this way you can support more browsers. 

1. In Page view, double-click inside the first paragraph of text, "Rock Climbing," 
to place the insertion point. 

2. On the Format tab of the Text Properties palette, click the Format button. 
The Paragraph Settings dialog appears. 
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3. Click the Borders tab. 

4. Select the Border option. 

5. Change Width to 3 points. 

6. Change the Color to dark blue, HTML #000066, the third color sample from 
the right in the bottom row of the Color Picker. 



Paragraph Settings 



Character | Paragraph Borders | Background | 



Border settings 



Stjle: | Solid 
Width. 



3 



Active borders: 

Top: _ Lett: [F 



Color: | Color: 14000066 _J |H Bottom: _ Right: |~7 



Padding 

Top: 



3 



Right: 



|pt zl 



This preview might not show the format you'll ;ee on your page because the text might be 
influenced by an additional style To lean about the scope of styles, pleiie see Help. 



-By default, all four sides of 
the border are turned on 

-Border width in points 



■ Click the color sample to 
display the Color Picker and 
select a different color 



7. Click OK. 

The border appears around the heading. 
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I i° 



Paragraph border- 
in Page view 




, H°°, 



Activities 



, l°y°, 




Rock Climbinglf 



Come with us to Mt, Washington, El Capitan Mt, Rainier, or Mt, Whitney, 
Vlountam Jacques provides expert guides td ensure you nave a sate and 
"nemorable climbing adventure in these incredible sites.!] 

River Rafting & Kayaking^ 

Whether you're looking for a one-day raft trip down the American River or a 
one-week camping and rafting trip down the Colorado, Mountain Jacques is the 
olace for you Mountain Jacques provides skilled guides and plenty of excitement 
or both beginners and experienced rafters and kayakers.f 



8. Click the Page Preview tab. 

Notice that the paragraph border does not show up in the browser preview. 

This is because the border is a cascading style sheet feature, and the text 
formatting for this site is HTML. 

9. Select Tools>Options>Current Site. 

10. In the Text formatting section of the General tab, select the Cascading Style 
Sheets (CSS) option. 



Current Site Opt 



General J META tags | History | Backup | 

Site name: MySite 

SiteStyle: Phoenix ■ Teal_Gray 

Number of pages: 3 

Defaults 



Browser compatibility: 
Dynamic Page Layout - All b 
Hew page size' 



Change... | 



Height: [555 j-j 

Character set: 
(Western European [ISO-E 



Width: 1 730 



-3 



Text formatting 

rr HTML Cascading Style Sheets |CSS) 



Quote type: | Curly Quotes 3 

HTML Options... | Variable Options... | 



- Select the Cascading Style 
Sheets (CSS) option 
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Paragraph border in 
browser preview 



11. Click OK. 

12. Click the Page Design tab, then click the Page Preview tab. 



File Edit View Go Object Text T00I5 Help 
Online Site Page Style Ass 



0 



I 



:ts Publish New Page Preview Site Publish Site 

Page Preview 




Activities 



Rock Climbing 



Come with us to Mt. Washington, El Capitan, Mt. Rainier, or Mt. Whitney. 
Mountain Jacques provides expert guides to ensure you have a safe and 
memorable climbing adventure in these incredible sites. 

River Rafting & Kayaking 

Whether you' re looking for a one-day raft trip down the American River or a one- 
week camping and rafting trip down the Colorado, Mountain Jacques is trie place 
for you. Mountain Jacques provides skilled guides and plenty of excitement for 

: : I : . : . : I . . . . : : ' ;. ; . : 



This time, because you set the Text formatting option to CSS instead of 
HTML, browsers that support CSS can display CSS formatting features. If you 
are previewing with a supported browser version, the paragraph border shows in 
the browser. 

13. Click the Page Design tab. 

Adding a Paragraph Background 

The cascading style sheets (CSS) standard also supports paragraph backgrounds. 

1. Double-click the first paragraph, "Rock Climbing," again. 

2. On the Format tab of the Text Properties palette, click the Format button. 

3. In the Paragraph Settings dialog, click the Background tab. 

4. In the Image section, click Browse. 

5. In the Picture File Open dialog, navigate to the NetObjects Fusion 
7.5\Styles\Mountain\lmages folder and select Background.gif. 
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Background.gif image 



Picture File Open 



Folder | | m 



•] 



Look in: _J Images 



"31 <r= s & & 



E | Background , gif ^| 


JJfp4.gif 


Eil' Banner.gif 


Sjfsl.gif 


8f DataIcon.gif 


^ s2.gif 


§f Line, gif 


&f s3.gif 


f|f pi. gif 


s4.gif 


ifp2.gif 




p3.gif 







[Background. gil 




□ pen | 




|Web Images [ K . gif ; K . jpg; M . jpeg; K . png] 


d 


Cancel | 



J?]*! 



W Show thumbnail image 



6. Click Open. 

7. In the Paragraph Settings dialog, click OK. 
The background appears in the heading. 



CSS formatting, paragraph 
border and background, in 
Page view 




Activities 



Rock Climbing^ 



pome with us to Mt. Washington, El Capitan, Mt. Rainier or Mt. Whitney 
Mountain Jacques provides expert guides to ensure you have a safe and 
tneiTiorable climbing adventure in these incredible sites .H 

River Rafting & Kayaking^ 

Whether you're looking for a one-day raft trip down the American River or a 
bne-week camping and rafting trip down the Colorado, Mountain Jacques is the 
place for you. Mountain Jacques provides skilled guides and plenty of excitement 
for both beginners and experienced rafters and kayakers.lj 



8. Click the Page Preview tab. 

The paragraph background shows in the browser because the Cascading Style 
Sheets (CSS) text formatting option is still selected on the General tab of the 
Current Site Options dialog. 
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CSS formatting shows 
in browser preview 



File Edit View Go Object Text Tool-- 
-line Site Page Style 



sh 1 Neu Page 
Page Preview 



Activities 




Rock Climbing 



Come with us to Mt. Washington, El Capitan, Mt. Rainier, or Mt. Whitney. 
Mountain Jacques provides expert guides to ensure you have a safe and 
memorable climbing adventure in these incredible sites. 

River Rafting & Kayaking 

Whether you' re looking for a one-day raft trio down the American River or a one- 
week camping and rafting trip down the Colorado, Mountain Jacques is the place 
for you. Mountain Jacques provides skilled guides and plenty 1 of excitement for 
Ooth beginners and experienced rafters and kayakers. 



9. To view this page with HTML formatting instead, select 
Tools>Options>Current Site, HTML, and click OK. 

10. Click the Page Design and Page Preview tabs again to view the same page 
without CSS support. 

Notice the large bold text from the Heading 1 SiteStyle element is preserved, 
but the CSS background and border features are not. 



You can set the scope for a 
style in the Edit Text Styles 
dialog. 



About Custom Text Styles 



You can select each heading and apply the border and background to it to make all 
the headings the same. 

However, there is an easier way. You can use the Edit Text Styles command on the 
Text menu to create a custom style and use the Custom Style drop-down list to 
apply that custom style to each heading. Alternatively, you can edit the existing 
Heading 1 style, but you must be careful to edit it for just this site and not the entire 
SiteStyle. When you edit a SiteStyle element, it affects every site using that 
SiteStyle. 

For information on editing and creating text styles, see Chapter 12, "Designing with 
Text" in the NetObjects Fusion 7.5 User Guide. For information on editing 
SiteStyles, see Chapter 17, "Using SiteStyles." 
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Where To Go From Here 

You navigate to all the pages in the Mountain Jacques site to confirm that you 
satisfied the goals you set at the beginning of this guide. You created a site where: 

♦ Customers can learn about Mountain Jacques and its activities 

♦ Site visitors can easily contact the company 

♦ The site generates excitement for upcoming events 

In addition, you created a contest that encourages potential clients to send email, 
and related businesses are advertising on the site! 

For information about other NetObjects Fusion features, check the online help and 
NetObjects Fusion 7.5 User Guide. 
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Upgrading Your Sites 

What's New in NetObjects Fusion 7.5? 

Check out the new features and services in NetObjects Fusion 7.5. 

E-Commerce Catalog Builder. Add products, descriptions, images and manage sales 
and inventory from a single location. Choose an e-commerce engine that is 
integrated in NetObjects Fusion to process orders online and create a memorable 
shopping experience. 

Sophisticated Style view. The enhanced Style view makes it easy to preview, add, or 
delete SiteStyles from a centralized location. Set up shared locations so friends and 
associates can easily access your collection of NetObjects Fusion SiteStyles. 

Brand-new SiteStyles. Professional quality SiteStyles make it easy to create a new 
look for your Web site. 

Interactive Online view. The redesigned Online view offers four sections and includes 
additional services, components, and graphics. Use the web-based Control Panel to 
manage services, hosting and e-business from any computer with internet access. 

Customized Site Projects list. Adjust the number of sites displayed, arrange projects in 
ascending or descending order, or lock the sites to display them permanently 

New HTML insertion points. Add HTML syntax or text by selecting from three new 
tabs in the Page HTML dialog: Start of Page, End of Page, or End of Body. 

Variable prefix and suffix support. Avoid incompatibility with predefined variables by 
using the new dialog to edit data types when creating or pasting scripts within the 
NetObjects Fusion development environment. 

Simplified META tag manager. Assign META tag descriptions to individual pages in 
the new Properties palette in Site view. Apply a set of META tags to every page on 
your Web site or inherit META tags from parent pages. 

Enhanced Photo Gallery features. Improvements to the Photo Gallery include new 
thumbnail and image frames, options for defining output settings, assigning ALT 
tags to each image, and creating profile settings for future use. 
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Multiple user profiles. Create individual profiles based on personal settings and easily 
switch between user profiles without the need for logging off and on the system. 

Streamlined auto-update manager. Select an update and install immediately or 
download and install at a later time. Choose from a number of online sources that 
function as mirror download sites. 

Advanced spell-checking capabilities. NetObjects Fusion now provides auto-correct 
capabilities as you type and highlights words the program has flagged for checking. 
Also, enable or disable report summaries. 

User-friendly file dialog. Add shortcuts to your favorite locations and resize the dialog 
window to accommodate the working space available on your desktop. 
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Upgrading Your Sites 

If you created sites with a previous version of NetObjects Fusion, you can upgrade 
them to NetObjects Fusion 7.5 by saving the sites as templates and basing new 
NetObjects Fusion 7.5 sites on the templates, or by simply opening t he site files. 
For the latest information on compatibility, refer to the Readme.htm file in your 
NetObjects Fusion 7.5 folder. 

Determining Site File Compatibility 

Site ( nod) and template ( nft) files created in the versions listed below are 
compatible with NetObjects Fusion 7.5. If some component or data object 
information does not appear, you must place the components or the data objects 
again. Tables you placed in versions earlier than 5.0 expand both vertically and 
horizontally when you view them in NetObjects Fusion 7.5. You might have to 
reposition objects on the page to accommodate the expanded tables. 

Versions supported: 

♦ Windows 3.0, 3.01, 4.0, 4.01, 5.0, 5.01, 5.02, 5.02a, MX site files and templates 

♦ Windows 3.01 and 4.01 international site files and templates except Chinese, 
Korean, and Japanese 

♦ Windows TeamFusion Client 3 .0 and TeamFusion Client 2000 templates only 

Versions not supported: 

♦ Windows 2.02 international 

♦ Windows 3.01 and 4.01 international: Chinese, Korean, and Japanese 

♦ Windows 1.0, 2.0, 2.01, 2.02 

♦ Windows TeamFusion Client 1 .0 

♦ Macintosh 1.0, 2.01 (same as 2.0), 2.02 

If you have sites built in versions that are not supported and you want to use them in 
NetObjects Fusion 7.5, go to www.netobjects.com/support, click the Workbench link, 
and follow the Documentation link to the Upgrading from Unsupported Versions 
usage note. 
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Migrating Sites and Assets from Earlier Versions 

From NetObjects Fusion 7.5, you can access an older site by creating a new site 
based on a template or by opening the site file. The best method is to convert the old 
site to a template in the earlier version of NetObjects Fusion and create a new site 
based on this template in NetObjects Fusion 7.5. To learn how to create a new site 
from a template, see Chapter 4, "Working with Templates" in the NetObjects 
Fusion 7.5 User Guide. 

♦ If you cannot create a template, and the older site file is on the same computer 
as NetObjects Fusion 7.5, copy its folder from your old \User Sites folder to your 
new \User Sites folder, and then open the file directly, as described in "Opening 
Site Files from Earlier Versions" on page 188. NetObjects Fusion prompts you 
to open a copy because once you open a file in NetObjects Fusion 7.5, you 
cannot open it in an earlier version. If your site contains blank banners or 
navigation bars, follow the steps in "Adding Your SiteStyles" on page 190. 

If your site contains blank pictures, select Verify All File Assets from the Assets 
menu in Assets view. See Chapter 28, "Managing Assets" in the NetObjects 
Fusion 7.5 User Guide for information. 

♦ If an older site file was created on a different computer, and you want to open it 
in NetObjects Fusion 7.5 on your computer, you must save it as a template (.nft) 
first. Open the older site file in its original version of NetObjects Fusion on the 
machine where it was created, export it as a template, copy the template folder 
to your computer, and then base a new site on the template. Saving a site as a 
template is the only way to move a site from one computer to another without 
losing asset information. See Chapter 4, "Working with Templates" in the 
NetObjects Fusion 7.5 User Guide. 

♦ If you opened an older site file in NetObjects Fusion 7.5 or created a NetObjects 
Fusion 7.5 site file from an older template and the style is missing, see "Adding 
Your SiteStyles" on page 190 for information. 

♦ If you already upgraded your files and want to remove the previous version of 
NetObjects Fusion, read "Removing Previous Versions of NetObjects Fusion" 
on page 191. 

Opening Site Files from Earlier Versions 

The easiest way to upgrade older site files is to simply open them in NetObjects 
Fusion 7.5. They are converted to the NetObjects Fusion 7.5 format when you open 
them. 
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If you have access to the earlier version of NetObjects Fusion, before you upgrade: 

1. Open the site in the earlier version. 

2. Verify all file assets. 

3. Export the site to a template. 

4. In NetObjects Fusion 7.5 create a new site based on the template. 

5. Export the site as a template. 

The new template is a zip file that contains the site and its assets. 
If you do not have access to the earlier version of NetObjects Fusion: 

1 . Use Windows Explorer or File Manager to copy the folders of the sites you want 
to upgrade from your older \User Sites folder to your NetObjects Fusion 7.5\User 
Sites folder. 

2. Launch NetObjects Fusion 7 .5 . 

3. Choose Open Site from the File menu, and select the .nod file of the site you 
want to upgrade. 

If you see a message that the backup folder for this site doesn't exist, click OK. 

A dialog confirms that the site was created with an older version of NetObjects 
Fusion and asks if you want to open a copy of the site instead of altering the 
current file. 

4. Click Yes and save the copy in the same folder as the original with a new name. 

NetObjects Fusion creates a new .nod file. The original nod file remains in the 
folder as a backup. 

5. Verify that the site upgraded properly and that all assets are functioning as you 
expect. 

6. Repeat the steps above until all the sites you want to use in NetObjects Fusion 
7.5 are upgraded. 

You can also open backup files created in earlier versions of NetObjects Fusion. 
Backup files are automatically saved in the \Backups folder in your site folder, or in 
your site folder with a number or the date as part of the file name. If you want to 
open a file from a \Backups folder, first move the file out of the \Backups folder into 
the site folder. This ensures that assets have the correct paths. 
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Note: If you open a template that uses a font which is not on your system, NetObjects Fusion 
substitutes the browser proportional font specified on the Text tab of the Options 
dialog. You can still apply the original font to any new text box in the site. When you 
open the site on a system that has the original font, it is restored. 

Adding Your SiteStyles 

When you create a new site, NetObjects Fusion always tries to read the style's 
images from the current \Styles folder. In NetObjects Fusion 7.5, if you open an 
older site file or create a site based on an older template, you might see blank 
banners, buttons or other style elements. If this happens you must add the SiteStyle 
to your new site. 

If you want to add a style, you must add the location, or source, where the SiteStyle 
is stored. The style will appear in the Style view list and you can then make the 
style Active so that it is associated with your current .nod. In addition, any new 
SiteStyles add to this location will appear in your Style view. See Chapter 17, 
"Using SiteStyles" in the NetObjects Fusion 7.5 User Guide. 

Use the following instructions to add a SiteStyle stored on your computer to the 
Style view. This style will be available in every new blank site you create. 

To add a SiteStyle from your computer: 

1. In NetObjects Fusion 7.5, open the site in which you want to use the new 
SiteStyle. 

2. In Style view, from the Style menu, choose Add SiteStyle Source. 

3. Select Local SiteStyles as the source type and click OK. 

4. Enter a name for the new source. 

This is the name that will appear in the Style view. 

5. Type in the path or navigate to the style folder containing the style you want to 
add, then click Test to verify the path entered is valid. 

The path entered must include the folder where the SiteStyle is stored. 

6. Click Finish. 

The SiteStyle source appears in the style list. For versions prior to NetObjects 
Fusion 4.0, the navigation button rollover images are blank. You must assign 
new rollover images to use the rollover feature for navigation bars. 
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Removing Previous Versions of NetObjects Fusion 

Use the Add/Remove Programs control panel to uninstall older versions of 
NetObjects Fusion. Remove older versions only after you verify that all site files, 
SiteStyles, templates, and other assets that you brought into NetObjects Fusion 7.5 
are functioning as you expect. Also, do not remove older versions if you need to 
share files with colleagues who still use older versions of NetObjects Fusion. 
Earlier versions cannot read templates created by NetObjects Fusion 7.5. 
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Dynamic HTML, see actions 
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cascading style sheets, see CSS 
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components 127 

Ad Banner 128 
control bar 29 
CSS 171,178 

text formatting option 180 
Custom Names 30 



files, importing 74 
G 

guides 44 
H 

help, online 3 
hotspots 

creating 60 
HTML 

Dynamic Page Layout 37 

editing 123 

Fixed Page Layout 37 
importing files 116 
output options 37, 1 12, 167 
referencing 120 
Regular Tables 37 
Source view 47 

I 

imagemaps 

creating 60 
images 

adding 16,100 

adding to text box 76 

aligning 78 

cropping 17 

sizing 17 
importing 

documents 74, 172 

J 

JavaScript submenus 66 



DHTML, see actions 
documents 

importing 74, 172 



Layout area 1 2 
properties 41 
sizing 43, 145 
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Page view 11,39 
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R 
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s 
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saving sites 25 
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line break 103 
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